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有 和 句 衰 贬 难 辩 的 老话 是 这 样 说 的 :“ 愿 你 生活 在 一 个 有 趣 的 时 代 。” 这 人 句 话 送 给 素 不 相识 的 
你 ,我 觉得 Web 就 永远 停留 在 有 趣 的 时 代 。 我 们 正在 设计 越 来 越 多 的 移动 设备 ， 每 一 款 都 比 我 
在 职业 生涯 中 拥有 的 大 多 数 笔记 本 计算 机 更 强大 。 我 们 也 正在 精心 设计 这 个 Web, 让 它 既 可 以 运 
行 在 发 达 经 济 体 老 化 的 基础 设施 之 上 , 也 可 以 在 年 轻 的 新 兴 市 场 中 服务 于 便宜 的 、 低 功 耗 的 移动 


设备 


换 句 话说 , 今天 的 Web 访问 范围 之 广 前 所 未 有 ， 而 其 脆弱 程度 也 远 远 超出 我 们 的 想象 。 只 
要 用 户 请求 访 问 网 页 ， 都 可 能 遭遇 形形色色 的 问题 : 可 能 是 连接 断 开 , 或 者 是 网 络 延迟 太 高 、 无 
法 加 载 资源 ， 叉 或 者 是 用 户 用 完了 当月 的 数据 流量 。 

我 们 正在 构建 数字 化 体验 一 一 有 些 是 响应 性 的 ， 有 些 则 不 然 一 一 它们 比 Web 历史 上 其 他 时 
间 产 生 的 一 切 都 更 美好 。 但 我 们 也 需要 开始 为 性 能 而 设计 ，, 为 此 , 需要 针对 网 络 脆弱 性 和 用 户 屏 
幕 宽度 创建 更 佳 的 网 站 和 服务 。 

幸好 ， 你 已 经 开始 阅读 这 本 书 了 ， 它 可 以 帮助 你 做 到 这 一 点 。Jeremy Wagner 为 现代 Web 开 
发 人 员 编 写 了 一 份 非常 有 价值 的 参考 资料 ， 运 用 通俗 易 懂 的 语言 来 阐明 那些 听 起 来 最 神秘 的 缩 
写 、 看 起 来 最 神秘 的 Web 优化 技巧 。 在 这 样 一 个 有 趣 的 Web 时 代 ，Jeremy 的 指南 必 不 可 少 。 仔 
细 读 读 这 本 书 ， 你 将 获得 确保 网 站 既 快 速 灵 活 又 能 提供 良好 带宽 的 技能 。 


Ethan Marcotte 
设计 师 、Responsive Web Desiem 作者 


了 中 


前 


早先 我 没 想 过 要 写 书 ， 但 一 直 以 来 我 做 所 有 的 Web 项 目 最 优先 考虑 的 就 是 网 站 要 快 。 依 我 


之 见 ， 慢 网 站 不 仅 会 带 来 不 便 ， 而 且 更 会 对 用 户 体验 产生 致命 影响 。 在 加 载 完 网 站 之 前 ， 谈 不 上 
用 户 体验 ， 而 加 载 完成 的 时 间 越 长 ， 用 户 就 越 能 体会 到 这 种 缺失 。 


我 在 2015 年 向 Manning 出 版 社 投稿 ， 这 时 我 已 不 是 第 


一 个 写 Web 性 能 主题 的 人 。 之 前 许多 


作者 都 写 过 ， 我 知道 我 是 站 在 巨人 肩 上 。 我 希望 这 本 书 能 够 为 现在 的 Web 开发 人 员 提供 参考 ， 


帮助 他 们 构建 更 快 的 网 站 。 我 认为 它 实现 了 这 个 目标 。 
讨论 Web 性 能 时 ， 通 常会 不 可 避免 地 涉及 财务 考虑 。 


人 们 往往 认为 ， 性 能 不 佳 的 网 站 会 影 


响 销售 或 广告 收入 。 然 而 , 我们 还 不 够 了 解 的 是 , 这 种 网 站 对 于 受 流量 套餐 限制 的 用 户 来 说 , 代 


价 有 多 么 高 郧 。 可 以 说 , 对 于 那些 深 陷 于 陈旧 的 互联 网 基础 
法 逾越 的 障碍 。 世界 上 有 很 多 地 方 还 很 难 上 网 。 在 等 待 基础 


和 设施 的 人 来 说 ， 网 站 速度 慢 是 一 个 无 
设施 缓慢 改善 的 同时 , 作为 开发 人 员 ， 


我 们 可 以 通过 自身 的 努力 ， 开 发 性 能 优先 的 站 点 ， 为 用 户 带 来 点 滴 改 善 。 
我 编写 这 本 书 是 为 了 帮助 你 实现 目标 ， 而 Manning 的 伙伴 则 对 其 进行 了 完善 。 在 Web 变 得 
越 来 越 复杂 的 时 代 ， 解 决 Web 性 能 问题 正当 时 。 我 想 这 本 书 会 帮助 你 实现 最 终 的 目标 。 


致谢 


除了 作者 之 外 , 一 本 书 的 出 版 还 需要 很 多 人 的 努力 。 得 益 于 Manning 出 版 社 的 各 位 编辑 , 本 
书 得 以 付 梓 。 请 大 家 留意 这 部 分 ， 因 为 其 中 充满 了 我 的 感激 之 情 。 

首先 , 我 要 感谢 Manning 与 我 对 接 的 第 一 位 编辑 一 一 策划 编辑 Frank Pohlmann。 我 们 在 这 本 
书 的 提议 阶段 花费 了 很 长 时 间 ，Frank 指导 我 该 做 什么 、 不 该 做 什么 ， 最 重要 的 是 ， 他 让 我 确切 
地 知道 我 正在 做 什么 。Frank， 谢 谢 你 在 整个 过 程 的 前 期 对 我 的 指导 。 

鉴于 这 是 我 的 第 一 本 书 ， 我 想 向 Manning 的 出 版 人 Marjan Bace 表示 感谢 ， 他 认为 应 该 给 我 
这 个 机 会 。 同 意 出 版 一 本 书 是 要 冒 风险 的 , 尤其 是 要 出 版 一 个 尚 不 出 名 的 人 写 的 书 。 冒 这 种 风险 
需要 一 些 勇 气 。 谢 谢 你 ，Marjan。 

每 一 位 作者 的 背后 都 有 一 位 编辑 ,负责 督促 他 竭尽 所 能 写 出 最 好 的 初稿 。Susanna Kline 是 本 
书 的 项 目 编辑 ， 在 此 ， 我 对 她 在 这 个 项 目 上 的 辛勤 工作 和 不 可 或 缺 的 指导 表示 衷心 的 感谢 。 
Susanna 不 仅 扮演 了 编辑 的 角色 ， 而 且 还 是 一 位 伟大 的 教练 。 她 理解 我 面 对 这 项 艰巨 而 新 颖 的 任 
务 时 所 表现 出 的 脆弱 , 尤其 是 在 创作 初期 有 诸多 不 确定 性 的 时 候 。 她 的 指导 对 本 书 的 成 功 至 关 重 
要 。Susanna， 谢 谢 你 的 帮助 。 

当然 ， 每 本 技术 书 还 需要 一 位 技术 编辑 。Nick Watts 做 得 很 出 色 。 他 见 多 识 广 ， 提 出 了 很 多 
宝贵 意见 ， 并 对 我 的 主张 和 观点 主动 提出 质疑 ， 这 些 无 疑 都 为 提高 最 终 的 文本 质量 做 出 了 贡献 。 
谢谢 你 ，Nick。 

许多 人 在 不 同 阶段 对 本 书 进行 了 审阅 ， 包 括 Alexey Galiullin、Amit Lamba、Birnou Sebarte、 
Daniel Vasquez 、John Huffman、Justin Calleja、Kevin Liao、Matt Harting、Michael Martinsson 、 


Michael Sperber 、Narayanan Jayaratchagan 、Noreen Dertinger 、Omer Faruk Celebl 、Simone Cafiero 
和 William Ross。 他 们 从 读者 的 角度 提供 了 宝贵 的 见解 。 我 要 感谢 他 们 的 意见 和 建议 , 正 因 如 此 ， 
这 本 书 比 仅 赁 我 自己 努力 的 结果 要 更 好 。 

对 全 书 内 容 的 润色 也 很 重要 。 我 要 感谢 David Fombella Pombal 对 初稿 进行 了 全 面 和 出 色 的 
技术 校对 ， 让 我 发 现 了 本 来 会 忽略 的 问题 。Sharon Wilkey 细致 梳理 、 审 校 并 进一步 完善 了 终 稿 ， 
对 此 , 我 表示 非常 感谢 。Elizabeth Martin 润色 了 原稿 , 修正 了 不 规范 的 表达 。 最 重要 的 是 ，Kevin 
Sullivan 很 好 地 协调 了 前 期 和 生产 阶段 。 非 常 感谢 你 们 。 你 们 在 本 书 的 最 后 关键 环节 做 出 了 出 色 
的 工作 。 

我 还 要 感谢 Ethan Marcotte ， 他 所 做 的 工作 已 经 永久 地 改变 了 我 们 开发 Web 的 方式 。 当 我 联 
系 Ethan， 问 他 是 否 有 兴趣 为 本 书写 序 时 ， 他 回 了 信 ， 称 有 时 间 看 初稿 ， 这 令 我 非常 惊喜 。 序 代 


2 致 谢 


表 着 对 一 本 书 的 认可 ， 具 有 举足轻重 的 地 位 。 知 道 Ethan 认可 这 本 书 的 内 容 时 ， 是 我 职业 生涯 中 
最 自 罕 的 时 刻 之 一 。 谢 谢 你 ，Ethan。 

我 要 感谢 我 的 父亲 Luke 和 母亲 Georgia, 感谢 他 们 支持 我 所 做 的 和 试图 做 的 一 切 , 甚至 包括 
那些 思春 的 事情 。 我 也 要 感谢 我 的 哥哥 Lucas， 他 一 直 是 我 的 榜样 ， 我 从 他 身上 学 到 了 “只 要 努 
力 ， 一 切 凤 有 可 能 "。 非 常 感谢 。 

最 后 ， 我 要 感谢 我 的 妻子 Alexandria。 她 坚定 的 支持 和 无 私 奉献 是 我 的 力量 源 果 。 她 温柔 的 
鼓励 和 信任 对 我 的 帮助 超出 了 她 的 想象 。 

对 于 其 他 我 可 能 忘记 提 及 的 人 ， 你 们 也 是 本 书 出 版 过 程 中 不 可 或 缺 的 一 部 分 ， 感 谢 你 们 。 


天 于 本 书 


本 书 则 在 帮助 你 创建 更 加 快速 的 网 站 ,你 在 本 书 中 学 到 的 技术 也 能 够 用 于 提升 已 有 网 站 的 
性 能 。 


读者 对 象 


本 书 主要 (但 不 只 ) 关注 在 客户 端 提 升 网 站 性 能 。 这 意味 着 本 书面 向 熟练 掌握 HTML、CSS 

和 JavaScript 的 Web 前 端 开发 人 员 。 你 应 当 能 够 在 工作 中 对 这 些 技 术 运 用 自如 。 
本 书 偶尔 会 在 合适 的 时 机 涉及 服务 器 端的 内 容 ， 例 如 一 些 使 用 PHP 编写 的 服务 器 端 代码 示 

|。 这 些 例子 则 在 说 明 某 个 概念 ， 通常 不 是 重点 。 第 10 章 介绍 服务 器 压缩 ， 包 括 新 的 Brotli 压 
缩 算法 ， 这 需要 服务 器 端 配合 进行 。 第 11 章 解 释 HITP/2， 这 个 新 协议 会 影响 网 站 优化 方式 ， 如 
果 你 对 此 感 兴趣 ， 这 一 章 会 对 你 大 有 帮助 。 

你 还 应 该 在 一 定 程 度 上 熟悉 命令 行 操作 , 不 过 即使 现在 还 做 不 到 这 一 点 , 你 仍然 可 以 跟随 提 
供 的 示例 进行 操作 。 接 下 来 ， 我 们 来 谈 谈 本 书 结构 。 


本 书 结构 


本 书 和 Manning 出 版 的 其 他 书 不 太一 样 , 没有 划分 为 几 大 部 分 , 不 过 确实 遵循 了 某 种 逻辑 流 
程 。 第 1 章 介绍 Web 性 能 的 基础 知识 ， 比 如 代码 压缩 、 服 务 器 压缩 等 。 如 果 你 已 经 开始 注重 性 
能 ， 那 就 不 会 对 这 些 概念 感到 陌生 ， 这 一 章 是 为 那些 不 熟悉 Web 性 能 概念 的 前 端 开 发 人 员 准 备 
的 。 第 2 章 介绍 性 能 评 佑 工具， 包括 在 线 的 和 集成 于 浏览 器 的 工具 ， 其 中 主要 关注 Chrome 的 开 
发 者 工具 。 

接着 ， 我 们 将 进入 CSS 优化 领域 。 第 3 章 涵盖 了 关于 如 何 精简 CSS 的 各 个 主题 和 示例 ， 介 
绍 如 何 使 用 CSS 原生 功能 提升 网 站 对 用 户 输 入 的 响应 能 力 。 第 4 章 介绍 “关键 CSS”( critical CSS ) 
的 概念 ， 这 种 技术 能 够 提升 网 站 的 泻 染 性 能 。 

之 后 将 讨论 图 像 优化 。 第 5 章 重 点 介绍 不 同类 型 的 图 像 及 其 使 用 方法 ， 以 及 如 何在 CSS 和 
内 联 HTML 中 以 最 佳 方式 将 它们 传输 给 不 同 设备 。 第 6 章 介 绍 如 何 缩减 图 像 的 文件 大 小 、 自 动 
生成 雪碧 图 、 使 用 Google 的 WebP 图 像 格 式 ， 以 及 编写 自 定义 的 图 片 懒 加 载 脚本 。 

随后 , 我 们 将 焦点 从 图 像 转 向 字体 。 第 7 章 介 绍 字体 优 化 , 内 容 包 括 使 用 最 优 的 efont-face 
层 县 来 精简 字体 、 使 用 CSS 的 unicode-range 属性 、 压 缩 服务 器 上 的 传统 字体 格式 ， 以 及 结 
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合 CSS 和 JavaScript 控 制 字体 的 加 载 与 显示 。 

第 8 章 和 第 9 章 关 注 JavaScript。 第 8 章 通过 提倡 使 用 浏览 器 内 置 特性 代替 jQuery 和 其 他 库 ， 
更 详细 地 说 明了 JavaScript 中 简约 主义 的 必要 性 。 对 于 那些 离 不 开 jQuery 的 人 ， 我 会 谈 及 兼容 
jQuery 的 替代 方案 ， 它 们 提供 了 jQuery 的 部 分 功能 ， 并 且 开 销 更 小 。 这 一 章 还 会 讨论 <script> 
标签 的 正确 位 置 、 如 何 使 用 async 属性 ,以 及 如 何 使 用 requestAnimationFrame 方法 编写 动 
画 。 第 9 章 介 绍 JavaScript Service Worker， 你 将 学 习 如 何 为 离线 用 户 提 供 内 容 ， 以 及 如 何 使 用 该 
技术 为 在 线 用 户 提高 页 面 性 能 。 

第 10 章 又 是 一 个 “大 杂烩 "， 主 题 包括 不 合理 的 服务 器 压缩 带 来 的 影响 、 新 的 Brotli 压缩 算 
法 、 资 源 提示 、 配 置 缓存 策略 ， 以 及 使 用 CDN 托管 资源 的 好 处 。 

第 11 章 介绍 HITP/2， 包 括 它 解决 的 性 能 问题 、 与 HTTP/1 优化 实践 之 间 的 区 别 、 服 务 器 推 
送 ， 以 及 如 何 调整 网 站 的 内 容 交 付 以 同时 兼容 两 个 协议 版 本 的 概念 证 明 。 

第 12 章 综 合 运 用 你 所 学 的 大 部 分 知识 ， 并 使 用 gulp 任务 管理 器 将 其 自动 化 。 你 将 学 习 如 何 
从 多 个 方面 自动 优化 网 站 性 能 ， 这 将 会 帮助 你 在 编码 时 完成 网 站 优化 ， 从 而 节省 宝贵 的 时 间 。 

另外 还 有 两 个 附录 。 附 录 A 是 一 份 工具 参考 ， 附 录 B 重点 介绍 常用 的 jQuery 函数 ， 并 展示 
如 何 通 过 原生 方法 完成 相同 的 任务 。 


本 书 使 用 的 工具 


学 习 本 书 示例 时 , 你 可 以 自由 选择 喜欢 的 文本 编辑 带 和 命令 行 窗口 。 除 此 之 外 ， 有 两 个 工具 
贯 企 全 书 ， 需 要 先行 安装 。 


Node.js 


Nodejs (有 时 简称 Node ) 是 允许 你 在 浏览 器 之 外 使 用 JavaScript 的 JavaScript 运行 时 。 它 
可 以 用 在 各 种 疯狂 的 场景 中 ， 几 年 前 ,几乎 没有 人 会 想象 到 JavaScript 还 可 以 这 样 使 用 。 这 包括 
任务 管理 器 、 图 像 处 理 器 ， 甚 至 Web 服务 器 。 所 有 这 些 都 是 通过 Node 包 管 理 器 ( npm ) 进行 安 
装 的 。 

本 书 的 优化 工作 离 不 开 Node。 比 如 ， 你 经 常 需要 使 用 它 来 在 本 地 运行 基于 Express 框架 的 
Web 服务 器 。 在 第 11 章 中 , 你 甚至 需要 运行 一 个 本 地 的 HTTP/2 服务 器 ; 在 第 6 章 , 你 需要 使 用 
Node 来 批量 优化 图 像 ; 在 第 12 章 中 ,你 将 要 通过 它 来 运行 gulp, 使 常见 的 优化 任务 自动 化 。 几 
乎 每 一 章 都 要 通过 Node 来 实现 某 种 功能 。 

如 果 你 想 掌 握 本 书 中 的 知识 ， 就 需要 先 安装 Node。 如 果 尚 未 安装 ,可 以 访问 Node 官网 并 前 
往 下 载 专 区 。 不 必 因 为 不 熟悉 Node 而 感到 惊慌 和 担心 ! 官网 已 经 详尽 解释 了 每 个 部 分 ， 按 照 指 
引 操 作 即 可 。 如 果 你 希望 后 续 深 入 了 解 Node 的 工作 原理 , 不 妨 看 看 《Nodejs 实 战 ( 第 2 版 )》"。 
但 对 于 阅读 本 书 来 说 ,不 需要 对 Node 有 非常 深入 的 了 解 。 


GD 此 书 已 由 人 民 由 


云 


昌 出 版 社 出 版 ， 详 见 https:/www.ituring.com.cn/book/1993。 一 一 编者 注 
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Git 

Git 是 一 个 版 本 控制 系统 ， 用 来 跟踪 软件 应 用 中 的 更 改 。 你 很 可 能 已 经 用 过 了 , 但 如 果 没 有 ， 
可 以 在 本 书 中 使 用 它 。Git 可 以 用 来 下 载 本 书 托管 在 GitHub 仓库 https://github.com/webopt 中 的 示 
例 代码 。 

为 什么 要 使 用 Git， 而 不 是 直接 下 载 示 例 代码 的 zip 文件 包 呢 ? 其 中 一 个 原因 是 ， 在 命令 行 
使 用 Git 这样 的 版 本 控制 系统 ， 更 容易 抓 取 并 执行 内 容 。 不 过 最 大 的 好 处 是 ， 如 果 你 陷入 困境 ， 
或 者 只 想 看 到 最 终 的 结果 ， 通 过 Git 可 以 很 容易 地 跳 转 到 已 完成 的 示例 代码 。 

如 果 你 从 未 用 过 Git， 不 必 担 心 。 官 网 清晰 描述 了 关于 它 的 所 有 说 明 ， 只 需要 遵循 步骤 使 用 
即 可 。 如 果 你 不 喜欢 使 用 Git， 可 以 到 https://github.com/webopt 从 每 个 仓库 分 别 下 载 zip 文件 。 


其 他 工具 


本 书 使 用 的 大 多 数 工具 都 将 由 Node 包 管 理 器 进行 安装 , 因此 它们 都 依赖 Node。 但 是 有 两 个 
例外 ， 让 你 有 机 会 使 用 Node 以 外 的 工具 。 

在 第 3 章 中 ， 有 个 例子 需要 把 DRY 原则 ( Don’trepeat yourself， 不 要 重复 自己 ) 应 用 在 CSS 
中 , 它 需 要 在 多 个 选择 髓 之 下 组 合 见 余 规 则 。 这 个 例子 使 用 了 一 个 基于 Ruby 的 工具 来 检测 元 余 ， 
名 为 csscss。 如 果 你 有 一 台 Mac， 或 者 运行 的 是 任何 其 他 类 UNIX 的 操作 系统 ， 可 能 能 够 直接 
使 用 它 。 如 果 你 运行 的 是 Windows 系统 ， 则 必须 下 载 Ruby。 

在 第 7 章 中 ， 有 个 例子 需要 精简 字体 使 其 体积 更 小 。 你 需要 使 用 一 个 基于 Python 的 工具 ， 
名 为 byftsubset。 在 类 UNIX 系统 上 ，Python 和 Ruby 类 似 ， 可 能 是 开 箱 即 用 的 。 如 果 你 使 用 
的 是 Windows 系统 ， 则 需要 前 往 Python 官网 获取 安装 程序 。 


代码 约定 


本 书 中 的 代码 是 以 一 种 大 多 数 开 发 人 员 能 接受 的 方式 编写 的 。 书 中 的 所 有 源码 都 采用 等 宽 字 
体 ， 以 区 别 于 其 他 文本 。 在 整 本 书 的 代码 片段 中 ,为 了 清晰 起 见 ， 相 关 部 分 都 进行 了 注释 。 对 现 
有 代码 段 的 修改 通常 加 粗 显 示 。 对 于 从 GitHub 下 载 的 代码 ， 缩 进 是 使 用 Tab 键 完 成 的 ， 你 可 以 
决定 一 个 Tab 字符 对 应 多 少 个 空格 字符 。 我 编写 书 中 示例 时 ， 使 用 的 是 4 格 缩 进 ， 书 中 的 代码 片 
段 也 遵循 了 这 个 约定 。 

所 有 示例 源 代码 都 可 以 从 图 灵 社 区 本 书 主页 ( https:/www.ituring.com.cn/book/2011 ) 下 载 。 


作者 在 线 


购买 本 书 英 文 版 的 读者 可 以 免费 访问 由 Manning 出 版 社 维护 的 在 线 论坛 , 在 这 个 论坛 中 , 你 
可 以 针对 本 书 发 表 评论 、 询问 技 术 问 题 、 从 作者 和 其 他 用 户 那里 得 到 帮助 。 要 访问 并 订阅 该 论坛 ， 
请 访问 https:/www.manning.com/books/web-performance-in-action。 这 个 页 面 介绍 了 注册 后 如 何 访 
问 论坛 、 可 以 得 到 什么 帮助 以 及 在 论坛 中 的 行为 准则 。 
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Manning 致力 于 为 读者 提供 一 个 平台 ， 让 读者 之 间 以 及 读者 和 作者 之 间 能 进行 有 意义 的 对 
话 。 但 我 们 并 不 强制 作者 参与 ,他 们 在 论坛 上 的 贡献 是 自愿 且 免 费 的 。 我 们 建议 你 尽量 问 作 者 一 
些 有 挑战 性 的 问题 ， 免 得 他 失去 参与 的 兴趣 ! 

只 要 本 书 英 文 版 仍然 在 售 , 读者 就 能 从 出 版 社 的 网 站 上 访问 作者 在 线 论坛 和 之 前 讨论 话题 的 


扫描 如 下 二 维 码 ， 即 可 购买 本 书 中 文 版 
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关于 封面 图 片 


本 书 封面 上 的 画像 题 为 “来 自 殉 罗 地 亚 萨 格 勒 布 附近 的 贝 登 如 人 ”。 这 张 图 片 取 自 19 世纪 中 
期 由 Nikola Arsenovic 绘制 的 克罗地亚 传统 服饰 图 集 的 复制 品 ， 由 克罗地亚 斯 普 利 特 的 人 种 志 博 
物 馆 于 2003 年 出 版 。 这 些 图 片 由 斯 普 利 特 人 种 志 博 物 馆 的 一 位 热心 的 管理 员 提 供 ， 该 博物 馆 位 
于 戴 元 里 先 呈 帝 的 宫殿 (公元 304 年 前 后 ) 遗址 ， 这 里 曾 是 中 世纪 罗马 帝国 的 中 心 。 这 本 图 集中 
有 克罗地亚 各 个 地 区 人 物 的 图 片 ， 色 彩 斑 澜 ， 并 附 有 对 当地 服饰 和 日 常生 活 的 介绍 。 

在 过 去 的 200 年 里 , 着装 规范 和 生活 方式 都 发 生 了 变化 ,地 区 之 间 曾 有 的 多 样 性 已 逐渐 消失 。 
现在 已 经 很 难 区 分 不 同 大 陆 的 居民 了 ,更 不 用 说 仅 相 隔 几 千 米 的 村 庄 或 城镇 。 也 许 , 文化 多 样 性 
已 经 转变 成 了 更 加 多 样 化 的 个 人 生活 一 一 当然 ， 是 更 加 多 样 化 和 快 节 奏 的 科技 生活 。 

Manning 出 版 社 将 反映 两 个 世纪 前 各 地 区 多 彩 生活 的 插图 用 作 封面 , 来 赞美 计算 机 行业 的 活 
力 和 创新 ， 也 通过 古老 图 册 中 的 图 片 带领 人 们 领略 过 去 的 风土 人 情 。 
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理解 Web 性 能 


本 章 内 容 

口 为 什么 Web 性 能 很 重要 

口 浏览 器 如 何 与 服务 需 通 信 

口 网 站 性 能 欠 佳 会 如 何 损害 用 户 体 验 
口 如 何 使 用 基本 的 Web 优 化 技术 


你 可 能 已 经 听 说 过 “性 能 ”这 个 词 ， 它 与 网 站 息息相关 。 那 究竟 什么 是 “性 能 ” 呢 ? 为 什么 
我 们 都 应 该 关注 它 ? Web 性 能 主要 指 网 站 的 加 载 速 度 。 这 很 重要 ， 因 为 缩短 加 载 时 间 可 以 改善 
网 站 在 任意 互联 网 连接 条 件 下 的 用 户 体验 。 用 户 体验 提升 后 , 网 站 就 更 方便 让 更 多 用 户 看 到 其 提 
供 的 内 容 。 这 可 以 帮助 你 实现 多 重 目标 ,小 到 提升 网 站 访问 量 和 内 容 阅读 量 , 大 到 促使 用 户 执行 
特定 操作 。 速 度 慢 的 网 站 则 很 考验 用 户 的 耐心 ， 甚 至 可 能 导致 用 户 连 内 容 都 没 看 就 关闭 了 页 面 。 

如 果 网 站 是 你 的 主要 收入 来 源 , 那么 做 一 做 性 能 评估 就 是 值得 的 。 如 果 你 有 一 个 电子 商务 网 
站 或 者 依赖 广告 收入 的 内 容 门户 网 站 ， 那 么 网 站 加 载 速度 慢 绝对 会 影响 你 的 收益 。 

在 本 章 中 ， 你 将 了 解 到 Web 性 能 的 重要 性 、 基 本 的 性 能 提升 技术 ， 以 及 如 何 应 用 这 些 技术 
优化 客户 的 单 页 面 网 站 。 


1.1 理解 Web 性 能 


身 为 开发 人 员 ， 你 或 许 听 说 过 Web 性 能 ， 但 是 对 它 了 解 不 深 ; 或 许 你 已 经 使 用 过 其 中 的 一 
些 技术 快速 解决 了 问题 ; 又 或 许 你 已 经 很 熟悉 这 个 主题 了 , 希望 通过 本 书 发 现 一 些 新 的 技巧 ， 以 
进一步 优化 自己 的 网 站 。 

别 担心 ! 无 论 你 在 这 个 领域 是 新 手 还 是 老将 ， 本 书 都 能 帮助 你 更 好 地 理解 Web 性 能 ， 了 解 
提升 网 站 性 能 的 方法 ， 以 及 如 何 将 这 些 方法 应 用 于 你 的 网 站 。 

不 过 ， 在 讨论 Web 性 能 的 细节 之 前 ， 必 须 先 透彻 理解 我 们 想 要 解决 的 问题 。 


1.1.1 Web 性 能 和 用 户 体 验 
高 性 能 的 网 站 可 以 改善 用 户 体验 。 你 可 以 通过 提高 网 站 速度 来 加 快 内 容 的 传输 ,从 而 改善 用 
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户 体 验 。 此 外 ， 当 网 站 加 载 速 度 更 快 时 ， 用户 更 有 可 能 关注 网 站 上 的 内 容 。 没 有 任何 一 个 用 户 愿 
意 浏览 加 载 缓慢 的 网 站 。 

有 数据 表明 ， 网 站 加 载 速度 慢 对 用 户 参 与 度 有 明显 的 影响 ， 特 别 是 在 电子 商务 网 站 上 ， 近 一 
半 的 用 户 和 希望 加 载 在 2 秒 内 完成 。 如 果 加 载 时 间 超 过 3 秒 ，40% 的 用 户 将 会 退出 。 页 面 啊 应 每 延 
述 1 秒 就 意味 着 7% 的 用 户 不 再 做 进一步 操作 。 这 不 仅 意 味 着 流量 的 损失 ,而且 还 会 导致 收入 损失 。 

此 外 , 网 站 性 能 不 仅 会 影响 用 户 , 而 且 还 会 影响 网 站 在 Google 搜索 结果 中 的 排名 。 早 在 2010 
年 ，Google 就 指出 : 页 面 加 载 速度 是 影响 网 站 搜索 结果 排名 的 因素 之 一 。 尽管 网 站 内 容 的 相关 性 
始终 是 影响 网 站 搜索 排名 的 最 重要 因素 ， 但 页 面 加 载 速度 确实 也 有 一 定 影响 。 

让 我 们 来 看 看 “传奇 音调 ”( Legendary Tones ) 网 站 的 搜索 排名 。 这 是 一 个 关于 吉他 和 吉他 
配件 的 博客 ， 很 受 欢 迎 , 每 月 大 约 有 2 万 名 独立 访问 者 。 该 网 站 通过 自然 搜索 结果 获取 了 其 大 部 
分 流量 ， 并 且 提 供 了 优质 内 容 。 可 以 使 用 Google Analytics 获得 所 有 页 面 的 平均 速度 数据 ， 并 将 
其 与 平均 排名 关联 。 图 1-1 显示 了 2015 年 某 一 个 月 的 结果 。 
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图 1-1 “传奇 音调 ”网 站 上 所 有 页 面 的 平均 排名 与 Google 的 页 面 下 载 时 间 之 间 的 关系 。 


数值 越 低 ， 排 名 越 好 


由 图 1-1 可 知 ， 各 个 页 面 的 搜索 排名 基本 保持 稳定 ,但 是 当 扑 取 时 间 超 过 1 秒 时 ， 排 名 就 会 
下 滑 。 因 此 , 我 们 需要 认真 对 待 性 能 问题 。 如 果 你 正在 运营 一 个 内 容 型 网 站 , 例如 博客 ,那么 自 
然 搜索 排名 就 是 你 最 重要 的 流量 来 源 。 缩 短 网 站 的 加 载 时 间 是 网 站 运营 成 功 的 重要 因素 。 

既然 知道 了 性 能 的 重要 性 ， 那 么 我 们 可 以 开始 讨论 Web 服务 器 如 何 进行 通信 ， 以 及 这 个 过 
旦 是 如 何 使 网 站 变 慢 的 。 
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1.1.2 Web 浏览 器 如 何 与 Web 服 务 器 通信 
在 理解 Web 优化 的 必要 性 之 前 ， 要 先知 道 问题 根源 所 在 一 一 浏览 器 和 服务 器 通信 方式 的 基 
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本 属性 导致 了 这 个 问题 ， 如 图 1-2 所 示 。 


用 户 Web 服 务 器 
1. 用 户 向 example.com 发 送 请 求 


2. 用 户 等 待 响应 


6 
3. 用 户 从 example.com 下 载 页 面 


图 1-2 用户 向 example.com 发 送 请 求 。 用 户 通过 浏览 器 发 送 网 页 请 求 ， 然 后 必须 等 待 
服务 器 响应 并 发 送 内 容 。 服 务 器 发 送 响 应 后 ， 用 户 才 能 在 浏览 器 中 接收 到 网 页 


当 人 们 说 “Web 性 能 的 重点 是 网 站 加 载 速度 更 快 ”时 ， 他 们 的 主要 关注 点 是 缩短 加 载 时 间 。 
简 言 之 , 加 载 时 间 就 是 从 用 户 请 求 网 站 到 网 站 出 现在 用 户 屏 幕 上 所 经 历 的 时 间 。 其 驱动 机 制 也 就 
是 从 用 户 请 求 内 容 到 服务 器 响应 到 达 用 户 所 消耗 的 时 间 。 

可 以 将 这 个 过 程 想象 为 : 你 走 进 一 家 咖啡 店 ， 点 了 一 杯 深度 烘焙 咖啡 ,然后 稍 等 片刻 ,你 就 
可 以 享用 到 。 从 根本 上 看 ， 点 咖啡 跟 与 Web 服务 器 通信 并 没有 什么 不 同 : 你 请 求 了 某 些 内 容 ， 
最 后 得 到 了 它 。 

当 浏览 器 请 求 网 页 时 ， 它 使 用 一 种 被 称 为 超 文本 传输 协议 〈 通常 称 为 HITP ) 的 协议 和 服务 
器 通信 。 浏 览 器 发 出 一 个 HTTP 请 求 ，Web 服务 器 回 以 一 个 HTTP 响应 ， 响 应 中 包含 了 状态 码 
和 请 求 的 内 容 。 

在 图 1-3 中 ， 你 可 以 看 到 向 example.com 发 出 的 一 个 请 求 〈 这 个 网 站 是 实际 存在 的 ， 信 不 信 
由 你 )。 动 词 GET 要 求 服务 器 定位 到 /index.html。 由 于 HTTP 协议 有 好 几 个 版 本 ， 因 此 服务 器 需 
要 知道 正在 使 用 哪个 版 本 的 协议 〈 在 本 例 中 是 HTTP/1.1 )。 最 后 ， 请 求 要 指明 需要 哪个 主机 名 的 


动词 资源 协议 


GET /index.html HTTP/1.1 
Host: example.com 


服务 器 
图 1-3 齐 析 对 example.com 的 HTTP 请 求 


发 出 请 求 后 ， 会 收 到 一 个 200 OK 的 响应 码 ， 这 个 响应 码 确认 了 请 求 的 资源 确实 存在 ， 且 响 
应 中 还 包含 了 index.html 的 内 容 。 随 后 ，Web 浏览 絮 会 下 载 并 解析 index.html 的 内 容 。 

上 述 所 有 步骤 都 会 产生 所 谓 的 延迟 : 包括 等 待 请 求 到 达 Web 服务 器 所 花费 的 时 间 、Web 服务 
器 汇集 和 发 送 响应 内 容 所 花费 的 时 间 ， 以 及 Web 浏览 器 下 载 响应 内 容 的 时 间 。 提 高 性 能 的 主要 
目的 之 一 就 是 减少 延迟 ， 即 减少 响应 到 达 客 户 端 所 需要 的 时 间 。 当 单个 请 求 〈 例如 示例 中 的 
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example.com ) 发 后 延迟 时 ,产生 的 影响 可 能 微不足道 。 但 实际 上 ， 加 载 任 何 一 个 网 站 都 不 仅仅 是 
对 单个 内 容 的 请 求 。 随 着 这 些 请 求 数量 的 增加 ， 用 户 体验 越 来 越 容易 受到 加 载 速度 变 慢 的 影响 。 

在 HTTP/1 服务 器 和 浏览 器 的 通信 中 ,可 能 会 出 现 一 种 被 称 为 队 头 阻塞 ( head-of-line blocking ) 
的 现象 ,之 所 以 会 发 生 这 种 情况 ,是 因为 浏览 器 限制 了 单一 时 间 点 内 发 出 的 请 求 数 (通常 是 6 个 。 
当 一 个 或 者 多 个 请 求 正 在 处 理 ， 而 其 余 请 求 已 完成 时 ， 对 内 容 的 新 请 求 将 会 被 阻塞 ， 直 到 原先 剩 
余 的 请 求 完成 为 止 。 这 种 行为 会 增加 页 面 的 加 载 时 间 。 

HTTP/2 是 HTTP 的 一 个 新 版 本 , 它 在 很 大 程度 上 解决 了 队 头 阻塞 问题 ,并 在 浏览 需 中 得 到 了 
广泛 支持 。 服 务 器 端的 职责 是 支持 协议 实现 ， 然 而 直至 2017 年 6 月， 大 约 15% 的 Web 服 务 需 使 
用 了 HTTP/2?。 由 于 HTTP/ 能 够 使 不 支持 HTTP/2 的 客户 端 回 退 到 HTTP/1, 因此 , 仅 支持 HTTP/1 
的 客户 端 仍然 容易 受到 旧版 本 协议 的 影响 。 此 外 ， 任 何 与 HTTP/1 服务 器 通信 的 浏览 器 都 会 遇 到 
相同 的 问题 ， 不 管 其 支持 HTTP/2 的 能 力 如 何 。 

我 们 所 在 的 这 个 世界 很 复杂 ， 所 以 目前 仍 需 要 同时 兼容 协议 的 两 个 版 本 。 接 下 来 , 我们 会 讨 
论 针 对 HTTP/1 优化 站 点 的 方法 ， 但 你 可 能 会 惊讶 地 发 现 ， 其 中 的 一 些 实践 在 HTTP/2 上 是 起 反 
作用 的 。 如 果 想 了 解 有 关 HTTP/2 的 更 多 信息 ， 以 及 如 何在 一 定 条 件 下 实现 每 个 协议 版 本 的 最 佳 
工作 流 ， 请 参见 第 11 章 。 

下 一 节 将 介绍 网 站 如 何 加 载 内 容 ， 以 及 这 个 过 程 如 何 导 致 网 站 出 现 性 能 问题 。 


1.1.3” Web 页 面 如 何 加 载 


在 一 个 单调 的 世界 里 ， 或 许 所 有 网 站 都 会 像 example.com 这 样 : 一 个 网 页 没有 任何 图 像 和 
JavaScript， 样 式 也 非常 少 。 但 在 现实 世界 中 ， 网 站 往往 比 单个 HTML 要 复杂 得 多 。 网 站 作为 
视觉 媒体 的 一 种 ， 可 以 为 内 容 提供 更 多 效果 : 样式 表 可 以 将 设计 运用 于 平淡 的 标记 ，JavaScript 
可 以 将 静态 页 面 转换 成 具有 复杂 行为 的 应 用 。 听 起 来 似乎 不 错 ,， 但 是 上 述 这 些 特性 是 有 成 本 的 。 
图 1-4 展示 了 用 户 从 Web 服务 器 获取 index.html 的 一 个 请 求 。 

浏览 器 在 下 载 index.html 后 ， 会 发 现 一 个 链接 到 样式 表 的 <1ink> 标 签 、 两 个 链接 到 JavaScript 
文件 的 <script> 标 签 和 一 个 引用 图 像 的 <img> 标 签 。 当 浏览 器 发 现 这 些 对 其 他 文件 的 引用 时 ， 
就 会 代表 用 户 发 起 新 的 HTTP 请 求 ， 以 检索 它们 。 最 初 的 一 个 网 页 请 求 最 后 变 成 了 5 个 请 求 。 尽 
管 5 个 请 求 并 不 多 ,但 一 个 典型 网 站 的 请 求 数 通 常 很 容易 就 能 达到 其 10 倍 ， 而 一 个 复杂 的 网 站 
甚至 可 以 拥有 100 个 左右 的 请 求 。 随 着 请 求 数 的 增加 ， 需 要 下 载 的 数据 量 也 会 增加 。 而 随 着 请 求 
及 其 附带 数据 的 增加 ， 页 面 加 载 所 需 的 时 间 也 会 增加 。 


中 到 2019 年 11 月 ， 这 一 比例 达到 了 42.1%。 


译 者 注 
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Web 页 面 


GET /styles.css 
| {}; 


styles.css 


入 
function() 


jquery.js 


人 
function() 


scripts.js 


GET /logo.png (| 
"m4 


logo.png 


GET /index.html 


BD 


index.html 


GET /jquery.js 


GET /scripts.js 


图 1-4 从 Web 服务 器 获取 index.html 的 步 又 


这 就 是 提高 网 站 性 能 的 挑战 : 在 现代 网 站 自身 的 需求 和 尽快 提供 服务 之 间 取 得 平衡 。 你 需要 
了 解 性 能 提升 技术 ， 这 样 才能 防止 复杂 Web 体验 影响 用 户 体验 中 最 有 价值 的 部 分 : 访问 内 容 的 
能 力 。 


1.2 ”上手 准备 


性 能 问题 通常 表明 前 端 架 构 中 存在 问题 。 尽 管 某 些 问题 可 能 源 于 配置 从 佳 的 应 用 程序 后 端 ， 
但 这 些 问 题 通常 存在 于 某 些 特 定 应 用 平台 (例如 PHP 或 者 .NET ), 不 在 本 书 讨论 范围 之 内 。 本 节 
将 研究 如 何 通过 交互 式 练习 解决 常见 的 性 能 问题 ， 从 而 提高 客户 的 单 页 面 网 站 的 性 能 。 

我 们 书 中 假定 了 一 个 客户 是 美国 中 西部 的 科 伊 尔 电 器 维修 公司 。 其 负责 人 联系 了 你 , 向 你 咨 
询 能 和 否 让 他 们 的 网 站 变 得 更 快 。 在 本 章 结束 时 ， 你 将 能 够 运用 技术 手段 ， 帮 助 他 们 将 网 站 加 载 时 
间 减 少 70%。 
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本 节 中 ,你 需要 在 计算 机 上 运行 客户 的 网 站 ,为 此 需要 用 到 Nodejs 和 Git。 你 还 会 使 用 Google 
Chrome 来 模拟 到 远程 服务 器 的 网 络 连接 ， 这 样 就 可 以 用 一 种 有 意义 的 方式 来 衡量 工作 成 果 。 


1.2.1 安装 Node.js 和 Git 


Nodejs (可 以 非 正 式 地 称 为 Node ) 是 一 个 JavaScript 运行 时 ,可 以 让 JavaScript 在 浏览 器 之 
外 运行 。Node 用 途 广 泛 ,， 但 在 这 个 例子 中 ,你 将 使 用 一 个 小 型 Node 程序 ， 这 个 程序 可 以 作为 本 
地 Web 服务 器 运行 客户 的 网 站 。 你 还 将 通过 几 个 Node 模块 实现 一 些 优化 目标 。 

为 简单 起 见 ， 此 处 使 用 Node 代替 了 传统 Web 服务 器 ( 例如 Apache )。 你 可 以 使 用 Node 快 
速 启动 本 地 Web 服务 器 ， 这 样 无 须 安 装 或 配置 Web 服务 器 ， 就 能 够 实现 本 书 的 练习 内 容 。 只 需 
几 分 钟 ， 你 就 可 以 使 用 Node 重 现 并 运行 本 书 中 的 示例 网 站 一 一 即便 没有 任何 Node 经 验 。 

要 安装 Node, 请 访问 Node.js 官网 , 在 下 载 专区 找到 你 的 操作 系统 对 应 的 安装 程序 。 运 行 安 
装 程序 时 ， 记 得 选择 标准 安装 选项 ， 以 确保 Node 包 管 理 需 (npm ) 能 够 被 安装 。npm 提供 了 
http:/npmjs.com 的 权限 ， 让 你 可 以 访问 广阔 的 Node 软件 包 生 态 系统 ， 客 户 网 站 的 练习 也 需要 用 
到 它 。 

你 还 需要 安装 Git 来 拉 取 本 章 中 的 客户 网 站 ， 以 及 本 书后 续 出 现 的 示例 网 站 。 可 以 通过 使 用 
Git,， 在 需要 的 时 候 从 一 个 中 心 位 置 获 取 本 书 人 代码。 如果 你 熟悉 Git 操 作 ， 那 就 太 好 了 , 但 是 跟随 
本 书 练习 并 不 需要 你 有 Git 经 验 。 要 下 载 Git, 请 访问 Git 官网 ,选择 你 的 系统 对 应 的 安装 程序 并 
运行 。 安 装 好 Node 和 Git 之 后 ， 就 可 以 继续 下 一 步 了 。 


1.2.2 下载 并 运行 客户 的 网 站 
可 以 从 GitHub 下 载 本 章 的 客户 网 站 。 从 命令 行将 代码 仓库 下 载 到 一 个 由 你 选择 的 目录 中 : 


git clone https://github.com/malchata/chl-coyle.git 
cd chil-coyle 


以 上 命令 会 将 练习 文件 从 GitHub 代码 仓库 下 载 到 命令 行 所 在 的 当前 工作 目录 。 如 果 没 有 安 
装 Git， 或 者 不 想 复制 存储 库 ， 可 以 在 https://github.com/webopt/chl-coyle 以 zip 文件 的 形式 下 载 
这 个 练习 ， 并 在 需要 的 位 置 解压 。 

下 载 练习 后 ， 需 要 使 用 npm 下 载 Web 服务 器 所 需 的 软件 包 。 在 同一 文件 夹 下 ， 运 行 以 下 命 
令 下 载 并 安装 所 需 的 软件 包 : 


npm install express 


这 条 命令 会 将 Express 框架 安装 到 当前 目录 。 可 以 使 用 它 创建 一 个 简单 的 Web 服务 器 ， 为 本 
例 和 其 他 示例 提供 静态 文件 ， 这 些 示 例 将 在 你 的 计算 机 上 本 地 运行 。 无 须 熟 悉 Express 或 者 其 工 
作 原 理 ， 即 可 继续 执行 后 续 步 骤 。 除 了 从 计算 机 上 提供 静态 文件 外 ,本 书 所 有 示例 都 无 须 用 到 该 
框架 的 其 他 特性 。 
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类 UNIX 操作 系统 的 权限 问题 
在 大 多 数 操作 系统 中 ，npm 安装 软件 包 时 通常 不 会 遇 到 问题 ， 但 如 果 在 Mac 或 者 任何 其 
他 类 似 UNIX 的 环境 中 遇 到 问题 ,可 以 使 用 sudo 运行 npm 命令 ,以 解决 任何 权限 相关 的 问题 。 
在 Windows 中 ， 以 管理 员 身 份 打 开 新 的 命令 行 窗口 ， 会 有 所 帮助 。 


根据 网 络 连接 速度 的 不 同 ,安装 可 能 需要 10 秒 或 者 更 长 时 间 。 安装 完成 后 ,运行 以 下 命令 ， 
启动 本 地 Web 服务 器 : 


node http.js 


运行 该 命令 会 启动 一 个 本 地 Web 服务 器 , 可 以 通过 在 计算 机 上 打开 http://localhost:8080/ 访 问 
客户 的 网 站 ， 如 网 1-5 所 示 。 


651-555-5555 
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SCHEDULE AN APPOINTMENT 
图 1-5 浏览 器 查看 从 本 地 计算 机 运行 的 客户 网 站 
如 果 在 8080 端口 已 经 运行 了 另 一 个 服务 ， 那 么 可 以 在 文本 编辑 器 中 打开 http.js 文件 ， 修 改 
第 8 行 的 端口 号 。 要 停止 运行 服务 器 ， 请 按 Ctrl+C。 
1.2.3 ”模拟 网 络 连 接 


由 于 是 在 本 地 计算 机 上 运行 客户 网 站 的 , 所 以 向 本 地 主机 发 出 请 求 不 会 出 现 延 迟 。 但 没有 延 
迟 就 很 难 衡量 任何 性 能 提升 ， 因 为 这 种 场景 下 不 会 存在 网 络 瓶 颈 。 

一 种 解决 办 法 是 ， 执 行 这 些 步骤 时 ， 将 网 站 部 署 到 远程 的 Web 服务 器 。 但 是 对 我 们 的 目标 
来 说 ， 这 种 办 法 可 能 过 于 麻烦 。 男 一 种 更 简单 的 办 法 是 使 用 Google Chrome 开发 者 工具 。 
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首先 打开 Chrome， 启 用 开发 者 工具 。 在 Windows 下 需要 按 F12， 在 Mac 下 则 要 按 Command + 
Alt+I。 此 时 开发 者 工具 应 该 会 出 现在 Chrome 窗口 中 。 男 一 种 办 法 是 选择 View > Developer > 
Developer Tools( 视图 一 开发 者 一 开发 者 工具 ) 菜 单 。 出现 Tools 菜单 时 , 点 击 窗口 顶部 的 Network 
选项 卡 ， 如 图 1-6 所 示 。 


Network 选 项 卡 节 流 菜单 
@@@ Developer Tools - rapehoNeooaeeonLenonenevas rviceworker.js 
民 0 Elements Layers Console Sources Network Timeline Profiles ResoWrces Security Audits 
者 本 了 view: 三 二 Preserve log 图 Disable cache No throttling 了 
Hide data URLs 必用 XHR JS CSS Img Media Font Doc WS Other 


图 1-6 Google Chrome 开发 者 工具 窗口 中 Network 选项 卡 的 位 置 。 可 以 通过 节 流 菜单 
模拟 互联 网 连接 速度 


在 顶部 附近 ，Disable cache 的 右 侧 ， 有 一 个 标记 为 No throttling 的 下 拉 菜 单 。 这 是 网 络 节 流 
菜单 , 单 击 它 将 显示 选项 列表 。 这 些 选项 可 以 模拟 各 种 环境 , 而 这 些 环 境 有 助 于 性 能 测试 。 现在 ， 
选择 Regular 3G 配置 ， 它 会 模拟 一 个 较 慢 的 移动 网 络 连 接 。 


别 志 了 ， 用 完 即 关 掉 ! 
当 你 完成 客户 网 站 的 优化 之 后 ， 记 得 把 下 拉 菜 单 切 换 回 No throttling。 如 果 忘 记 这 一 点 ， 
那么 打开 开发 者 工具 时 ， 所 有 Web 浏览 都 将 被 所 选 设置 限制 。 


运行 客户 网 站 并 设置 网 络 节 流 之 后 ， 可 以 检查 客户 的 网 站 ， 并 使 用 Chrome 的 开发 者 工具 创 
建 瀑布 图 。 
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要 优化 一 个 网 站 ,你 必须 能 够 确定 可 改进 的 领域 。 这 意味 着 需要 分 析 页 面 上 的 请 求 数 、 页 面 
包含 的 数据 量 以 及 页 面 加 载 所 需 的 时 间 。 此 时 ，Chrome 网 络 工具 就 派 上 用 场 了 。 本 节 将 学 习 如 
何 使 用 这 些 工 具 创 建 瀑布 图 ， 以 及 如 何 量化 客户 网 站 的 各 个 方面 ， 从 而 确定 优化 的 起 点 。 

Chrome 的 网 络 工具 位 于 Network 选项 卡 下 ， 和 网 络 节 流 配置 处 于 同一 位 置 。 要 分 析 一 个 网 
站 ， 首 先 要 确保 Record 按钮 处 于 开启 状态 ， 如 图 1-7 所 示 。 


Record 选择 
按钮 Disable cache 
民品 Elements Layers Console Sources Network \Timeline Profiles Res 
和 日 HF View 旺 一 Preserve log 图 Disable cache No throttling 
Hide data URLs | XHR JS CSS Img Media | 


1-7 生成 资源 瀑布 图 之 前 ， 必 须 确保 Record 按钮 处 于 开启 状态 (红色 )。 此 外 还 应 选中 


Disable cache 复 选 框 ， 以 确保 重新 加 载 页 面 以 衡量 优化 效果 时 不 会 进行 缓存 
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在 Network 选项 卡 中 ,首先 要 确保 选中 Disable cache 复 选 框 。 首 次 访问 一 个 网 站 时 ,不 会 有 
任何 资源 缓存 一 一 这 个 场景 才 是 你 想 要 重 现 的 , 否则 网 站 的 资源 将 从 缓存 中 提供 。 尽 管 有 缓存 时 
网 站 加 载 速 度 更 快 , 但 最 好 假设 普通 用 户 未 曾 缓 存 过 你 的 网 站 资源 。 对 于 这 样 的 未 知 站 点 ， 此 类 
情况 发 生 的 概率 更 大 。 

在 Network 选项 卡 中 ， 要 确保 左上 角 的 Record 按钮 处 于 开启 状态 ( 见 图 1-7 )。 按 钮 为 红色 
代表 已 启用 。 如 果 还 没有 打开 客户 网 站 http:/localhost:8080， 那 么 转 到 在 你 的 计算 机 上 运行 的 客 
户 网 站 以 生成 瀑布 图 ( 如 果 你 已 经 打开 客户 网 站 ， 请 刷新 )。 页 面 加 载 完 成 后 ， 即 可 看 到 结果 。 
图 1-8 显示 了 客户 网 站 的 瀑布 图 。 


网 站 资源 资源 加 载 时 间 瀑布 图 
OO@e@ Developer Tools -http://localhost:8080/ 
[x 串 Elements Layers Console Sources Network \Timeline Profiles Resources Security Audits » 
SO Om TF view: 三 二 Preserve log 图 Disable Cache Regular 3G (750 kb/ 
Hide data URLs | XHR JS Img Media Font Doc WS Manifest Other 

Name Method Status Protocol Type Initiator Size Time Timeline - Start Time 4.00s 6.00s 4 
localhost GET 200 http/1.1 document Other 4.8KB 162ms [ 
_ styles.css GET 200 http/1.1 stylesheet (index):7 18.5KB 567ms 
jquery.js GET 200 http/1.1 script (index):144 253 KB 5.845 
_ behaviors.js GET 200 http/1.1 script (index):145 3.4KB 255ms 个 
m= bg@2x.jpg GET 200 http/1.1 jpeg (index):144 144KB 4.41s Dhol] 
“| logo@2x.png GET 200 http/1.1 png (index):144 69.1KB 2.82s | WE | 
可 brothers@2x.jpg GET 200 http/1.1 jpeg (index):144 33.3KB 1.63s ES 
™ states@2x.png ”GET 200 http/1.1 png (index):144 9.6KB 630ms ld 
8 requests | 536 KB transferred | Finish: 6.10s | DOMContentLoaded: 6.15s | Load: 6.15s 

页 面 加 载 统计 资源 加 载 开始 资源 加 载 结束 


图 1-8 ”为 客户 网 站 生成 的 瀑布 图 。 在 顶端 可 以 看 到 对 index.html 的 请 求 ， 其 次 是 网 站 
的 CSS、JavaScript 和 图 像 。 每 个 条 形 代表 对 一 个 网 站 资源 的 请 求 。 这 些 条 形 
位 于 x 轴 ， 最 左 端 对 应 开始 请 求 的 时 间 点 ， 最 右 端 对 应 完成 下 载 的 时 间 。 条 形 
的 长 短 与 Web 浏览 器 请 求 和 下 载 资源 所 需 的 时 间 长 短 相对 应 


为 客户 网 站 生成 的 瀑布 图 中 显示 了 8 个 请 求 。 虽 然 这 个 数字 不 是 很 吓人 ,但 是 536 KB 的 总 
数据 量 对 于 这 样 的 小 站 点 来 说 算是 很 大 了 。 这 些 数 据 量 使 得 在 Regular 3G 的 节 流 配置 下 , 网 站 大 
约 要 6.15 秒 后 才能 全 部 加 载 完 毕 ， 这 意味 着 该 网 站 在 较 慢 的 移动 网 络 上 的 加 载 时 间 将 比 一 部 分 
用 户 预 期 的 时 间 长 得 多 。 

由 于 这 是 一 个 响应 式 网 站 , 因此 我 们 要 知道 设备 之 间 的 加 载 时 间 是 有 区 别 的 。 通过 被 称 为 媒 
体 查询 (media query ) 的 机 制 ( 网 站 CSS 的 一 部 分 )， 响 应 式 网 站 能 够 在 不 同 屏幕 宽度 上 显示 不 
同 内 容 。 

第 3 章 会 更 加 详尽 地 介绍 这 些 内 容 。 但 你 需要 记 住 ， 这 个 网 站 在 三 类 设备 ( 台式 计算 机 、 平 
板 计算 机 和 手机 ) 上 会 呈现 不 同 的 效果 。 
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此 外 , 这些 设 备 的 屏幕 不 仅 大 小 不 同 ， 而 且 显 示 密 度 ( 屏幕 上 每 英寸 的 像素 数 ) 等 功能 参数 
也 不 同 。 例如， 如 果 你 用 过 苹果 公司 的 产品 ， 就 见 过 高 DPI ( dots per inch， 每 英寸 点 数 ) 显示 器 
的 效果 。 要 保持 这 些 屏幕 下 的 高 视觉 质量 ， 需 要 提供 比 标准 DPI 显示 器 分 辩 率 更 高 的 图 像 集 。 有 
关 这 些 屏 幕 类 型 和 提供 特定 图 像 的 方法 的 更 多 信息 ， 请 参阅 第 5 章 。 

如 果 你 现在 还 不 理解 关于 CSS 媒体 查询 和 屏幕 大 小 的 所 有 讨论 ， 别 担心 ， 我 们 关注 的 重点 
是 ,客户 网 站 的 加 载 时 间 不 仅 因 网 络 连接 质量 而 不 同 ， 而 且 还 因 设 备 本 身 的 特性 而 不 同 。 根 据 所 
访问 的 站 点 ， 显 示 密 度 较 高 的 设备 下 载 的 数据 可 能 比 具 有 标准 显示 密度 的 设备 多 。 表 1-1 根据 设 
备 类 型 和 显示 密度 ， 列 出 了 传输 的 数据 量 和 网 站 加 载 时 间 。 


表 1-1 不 同 设备 的 页 面 加 载 时 间 比 较 。 结 果 因数 据 量 和 设备 的 显示 密度 而 异 


设备 类 型 显示 密度 页 面 大 小 加 载 时 间 
移动 端 ( 手机 和 平板 计算 机 ) 标准 08D 6 
移动 端 (手机 和 平板 计算 机 ) 高 526 KB e012 
桌面 端 标准 383 KB 4.51 秒 
桌面 端 高 536 KB 6.15 秒 


当 你 继续 对 客户 网 站 进行 性 能 优化 时 , 需要 记录 每 个 场景 的 加 载 时 间 和 减少 的 数据 量 , 因为 
它 和 你 选择 的 Regular 3G 节 流 配置 有 关 。 下 面 进入 正题 吧 ! 


1.4 优化 客户 网 站 


提高 网 站 性 能 时 ， 目 标 很 简单 : 减少 传输 的 数据 量 。 这 样 做 将 减少 站 点 在 任何 设备 上 加 载 的 
时 间 。 这 样 做 对 HITP/1 和 HTTP/2 服务 器 上 的 用 户 都 有 好 处 。 如 果 问 有 没有 最 重要 的 一 条 建议 ， 
那 就 是 : 传输 更 少 的 字 节 意味 着 更 快 的 加 载 速度 。 

减少 请 求 数 是 一 种 办 法 ， 下 面 介绍 的 一 些 性 能 提升 技术 也 将 鼓励 你 这 样 做 。 但 请 注意 ,这 种 
方法 最 适合 用 于 HTTP/1 工作 流 。 这 个 客户 网 站 的 请 求 已 经 比较 轻 量 了 ,减少 请 求 数 并 没有 多 大 
作用 。 


这 


些 优化 工作 包括 : 首先 要 缩小 网 站 资源 ， 包 括 CSS 、JavaScript 和 HTML 本 身 ; 然后 要 在 
不 损害 其 


视觉 完整 性 的 前 提 下 ， 优 化 网 站 上 的 图 像 ， 最 后 要 在 服务 器 上 压缩 文本 资源 。 


想 要 跳 过 ? 
如 果 你 在 客户 网 站 上 工作 时 遇 到 任何 问题 ( 或 者 你 很 好 奇 这 些 内 容 是 如 何 结合 到 一 起 的 )， 
可 以 使 用 git 命令 跳 到 最 终 的 优化 代码 。 在 Web 项 目的 根 上 目录 下 ， 输 入 git checkout -f 
optimized， 优 化 后 的 网 站 就 会 下 载 到 你 的 计算 机 上 。 请 注意 ,每 次 执行 这 个 操作 都 会 覆盖 
你 在 本 地 完成 的 所 有 工作 ， 所 以 一 定 要 记得 先 备份 ! 
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1.4.1 缩小 资源 


缩小 (minification ) 是 从 基于 文本 的 资源 中 去 除 所 有 空白 和 非 必 要 字符 的 过 程 ， 因 而 不 会 影 
响 资源 的 工作 方式 。 图 1-9 前 明了 对 CSS 应 用 缩小 的 基本 思想 。 


缩小 前 : 98 字 市 


.logo 
{ 
widih'r 2832p 
height: 186px:; 
position: absolute:; 
呈 二 罗 2 
left;: ~54px; 
Z-index: 11; 


.logo{width:282px;height:186px;position:absolute;top:0;left:-54px;zZ-index:11} 


缩小 后 : 77 字 节 


图 1-9 缩小 CSS 规则 。 在 这 个 例子 中 ，CSS 规则 从 98 字 节 缩小 到 77 字 节 ， 减 少 了 约 21%。 
当 这 个 概念 应 用 到 一 个 网 站 上 的 所 有 文本 资源 时 ,减少 的 总 字 节 数 可 能 为 几 千 字 节 


许多 人 类 可 读 的 文件 ， 比 如 CSS 和 JavaScript， 都 包含 了 开发 者 在 开发 过 程 中 插入 的 空白 和 
非 必要 字符 。 我 们 在 CSS 和 JavaScript 中 使 用 换行 符 和 缩 进 ， 使 它们 更 容易 阅读 ， 并 在 源 代码 中 
使 用 注释 进行 文档 记录 。 

Web 浏览 器 读 取 这 些 文件 时 不 需要 这 样 的 帮助 。 这些 文 件 中 不 必要 的 字符 越 少 ，Web 浏览 
下 载 和 解析 它们 的 速度 就 越 快 。 


提示 缩小 文件 时 ， 必 须 保留 原始 的 未 缩小 的 源 文件 。 缩 小 文件 后 ， 你 很 有 可 能 必须 再 次 编辑 
Web 项 目 中 的 文件 。 第 12 章 将 提供 这 方面 的 一 些 信息 。 


本 节 首 先 要 缩小 网 站 的 CSS, 然后 是 JavaScript, 最 后 是 HTML。 在 继续 之 前 , 先 要 使 用 npm 
下 载 几 个 包 ， 以 便 在 命令 行 中 缩小 文件 : 


npm install -g minifier html-minify 


安装 过 程 可 能 需要 一 分 钟 左右 。 软 件 包 安装 完成 后 ， 即 可 缩小 网 站 资源 。 完 成 本 节 后 ， 网 站 
总 大 小 可 以 减 小 173 KB。 


1. 缩小 网 站 的 CSS 
该 网 站 的 CSS 大 小 是 18.2 KB， 缩 小 后 可 以 稍微 减少 页 面 的 总 数据 量 。 要 缩小 网 站 的 CSS 
需要 做 两 件 事 ， 运 行 缩小 程序 ， 然 后 更 新 HTML， 指 向 缩小 的 新 文件 。 在 命令 行 中 打开 网 站 的 
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CSS 目录 ， 然 后 运行 这 条 命令 来 缩小 CSS : 


minify -o styles.min.css styles.css 


这 条 命令 的 语法 很 简单 。 它 用 -o 参数 指定 输出 文件 (style.min.css )。 这 个 参数 之 后 是 指定 的 
输入 文件 名 (style.css )。 命 令 执 行 完成 后 ， 检 查 输出 文件 的 大 小 ,你 会 发 现 文件 大 小 为 15.6 KB， 
缩小 了 14%。 缩小 的 量 不 算 大 , 但 这 是 个 很 好 的 开始 。 然 后 在 index.html 中 更 新 这 个 文件 的 引用 
方法 是 将 <1ink> 标 签 的 引用 从 styles.css 更 改 为 styles.min.css， 如 下 所 示 : 


<link rel="stylesheet" type="text/css" href="css/styles.min.css"> 
接 下 来 在 Web 浏览 器 中 重新 加 载 客户 网 站 ,确保 网 站 的 样式 依然 有 效 。 可 以 通过 检查 更 新 


的 瀑布 图 ， 以 及 寻找 对 styles.min.css 的 引用 ， 来 验证 缩小 的 样式 是 否 到 位 。 现 在 ， 客 户 网 站 的 
CSS 已 经 成 功 缩小 了 ! 


2. 缩小 网 站 的 JavaScript 

该 网 站 的 JavaScript 比 CSS 占据 了 更 大 的 数据 份额 。 该 网 站 使 用 了 两 个 JavaScript 文件 : 
jquery.js (jQuery 库 ) 和 behaviors.js( 网 站 的 行为 处 理 ， 依 赖 于 jQuery )。 它 们 的 大 小 分 别 是 
252.6 KB 和 3.1 KB。 要 缩小 这 些 文件 , 可 以 像 对 网 站 CSS 执行 的 操作 一 样 ， 对 其 运行 mini fy 


命令 : 


minify -o jquery.min.js jquery.js 
minify -o behaviors.min.js behaviors.js 


js 文件 缩小 后 ， 检 查 输出 文件 的 大 小 ， 并 与 未 缩小 的 版 本 进行 比较 。 你 将 看 到 behaviors.js 
减少 了 46%， 只 剩 1.66 KB; jqueryjs 减 少 了 66%， 只 剩 84.4KB。 这 是 个 巨大 的 改进 ， 大 大 减 小 
了 网 站 的 总 大 小 ( 本 节 末 尾 将 对 其 进行 计算 和 比较 )。 

你 需要 在 index.html 中 更 新 对 jqueryjs 和 behaviors.js 的 引用 ， 修 改 为 jquery.min.js 和 
behaviors.min.js。 找 到 引用 这 些 文件 的 <script> 标 签 ， 并 将 其 更 改 为 以 下 内 容 : 


<script src="js/jquery.min.js"></script> 


<script src="js/behaviors.min.js"></script> 


然后 重新 加 载 页 面 ， 并 检查 Network 选项 卡 ， 以 查看 缩小 的 文件 是 否 被 引用 。 确 认 无 误 后 ， 
你 就 可 以 缩小 最 后 一 个 资源 ， 即 网 站 的 HTML。 


3. 缩小 网 站 的 HTML 
网 站 的 HTML 是 另 一 种 可 以 缩小 的 资源 , 尽管 缩小 它 没 有 缩小 网 站 的 JavaScript 节省 的 数据 
量 多 。 这 一 次 ， 使 用 htmlminify Node 包 代替 minify (后 者 用 于 CSS 和 JavaScript 文件 )。 


缩小 HTML 的 意外 后 果 
缩小 HTML 通常 不 会 遇 到 任何 障碍 ， 但 你 会 注意 到 ， 布 局 可 能 发 生 了 细微 的 变化 。 这 是 
由 于 空白 对 CSS display 类 型 (如 inline 和 inline-block ) 的 影响 。 如 果 对 HTML 进行 
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缩 进 ， 这 些 CSS ai splay 类 型 在 周围 的 空格 被 删除 后 ， 可 能 会 产生 一 些 不 同 的 行为 。 如 果 影 
响 很 大 ， 可 能 需要 对 CSS 进行 一 些 调整 。 还 要 注意 所 有 按 字 面 处 理 空白 的 属性 或 标签 ， 例 如 
CSS white-space 属性 或 者 HTML <pre> 标 签 。 


缩小 网 站 的 HTML 之 前 , 需要 将 网 站 根 文件 夹 中 的 index.html 复制 到 一 个 名 为 index.src.html 
的 单独 的 源 文件 中 ， 以 便 保留 原始 文件 并 进行 更 改 。 复 制 完 成 后 ， 可 以 使 用 ntmlminify 将 其 
缩小 ， 如 下 所 示 : 


htmlminify -o indqex.html index.src.html 


缩小 后 的 文件 比 原来 小 19%， 从 4.57 KB 变 为 3.71 KB 。 虽 然 减 小 得 不 多 ， 但 确实 腾 出 了 很 
多 空间 ， 而 且 没 有 费 太 多 功夫 。 

随 着 网 站 资源 的 缩小 ， 你 已 经 为 网 站 精简 了 173 KB 。 由 于 网 页 在 所 有 类 型 的 设备 上 工作 都 
需要 这 些 资源 , 因此 对 于 任何 设备 的 用 户 来 说 ,性 能 都 得 到 了 提升 。 图 1-10 比较 了 表 1-1 中 所 有 
设备 类 型 在 文件 缩小 前 后 的 加 载 时 间 。 


a fi 
EL | 
| | |] 纺 4h 后 


6s 片 


4s 王 
3sF 
2sF 
1s 上 
0s 


= sy LU 
y 


曙 端 
(高 DPI) i 


图 1-10 在 Regular 3G 网 络 节 流 配置 中 ， 客 户 网 站 在 文件 缩小 前 后 的 加 载 时 间 。 根 据 
访客 设备 的 不 同 ， 优 化 范围 为 31%~41% 


eR i en tit Ra 
的 进步 。 下 一 节 将 通过 名 为 服务 器 压缩 的 服务 器 端 机 制 ， 进 一 步 提高 文本 资源 的 收益 率 。 
1.4.2 ”使 用 服务 器 压缩 


你 一 定 收 到 过 包含 压缩 文件 的 电子 邮件 。 这 些 文件 通常 用 于 在 线 通 信 , 是 将 多 个 文件 打包 为 
单个 文件 的 简便 方法 。 压 缩 文件 除了 方便 合并 外 , 还 可 以 减 小 文件 体积 。 服 务 器 压缩 在 减 小 文件 


加 载 时 间 
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体积 方面 的 工作 原型 


[ 


与 之 类 似 ，Web 浏览 器 能 够 代表 用 户 接受 和 解压 缩 内 容 ， 如 图 1-11 所 示 。 


.用 户 请 求 压 缩 内 容 2. Web 服 务 器 发 送 压缩 响应 
ss 


GET /index.html 
Accept-Encoding: gzip, deflate HE 


> | 


人 ~ 
ee 
二 一 


index.html 


Content-Encoding: gzip 


图 1-11 服务 器 压缩 的 过 程 


服务 器 压缩 的 工作 方式 是 用 户 从 服务 器 请 求 网 页 。 用 户 的 请 求 附带 一 个 Accept -Encoding 


头 部 信息 ， 
头 中 的 指示 
信息 进行 回 


向 服务 器 告知 浏览 器 可 以 使 用 的 压缩 格式 。 如 果 服 务 顺 能 够 按照 accept- 
对 内 容 进行 编码 ， 它 将 用 一 个 描述 压缩 方法 和 压缩 内 容 的 Content -Enco 
复 。 


Encoding 
ding 头 部 


这 非常 实用 ， 因 为 从 网 站 下 载 的 大 部 分 内 容 往往 是 文本 ， 可 压缩 性 很 好 。 几 乎 所 有 通用 的 浏 
览 器 都 支持 一 种 名 为 gzip 的 压缩 方法 ， 它 在 减 小 文本 资源 的 体积 方面 非常 有 效 。 在 优化 客户 端 
步 中 ， 你 需要 配置 服务 器 以 提供 压缩 内 容 。 通 过 这 些 努力 ， 页 面 大 小 将 减少 70KB ， 
加 载 速 度 将 提高 18%~32% ( 具体 取决 于 访问 者 的 设备 )。 但 是 ， 执 行 此 操作 之 前 ， 请 转 到 命令 行 
并 按 Ctrl+C 停止 Web 服务 器 。 然 后 键入 如 下 命令 以 安装 compression 模块 : 


网 站 的 这 一 


npm in 


池上 


女 衣 元 


代码 清单 1 


stall compression 


成 后 ， 在 文本 编辑 器 中 打开 http.js， 并 添加 代码 清单 1-1 中 的 粗 体 文本 行 。 


-1 配置 Node HTTP 服务 器 以 使 用 compression 


var express = Tedquire("express'") : 


Var compression = require("compression"); 
Var app = express();} 


把 compression 


模块 导入 脚本 
// 运行 静态 服务 器 
app.use(compression())， 脚本 将 compression 模块 
app.use (express.static(_ qirname) ) 十 直 | se 
app.1listen(8080); 疆 载 到 web 服务 器 


完成 上 述 修 改 后 , 重启 Web 服务 器 。 重 新 加 载 页 面 并 查看 瀑布 图 ,以 查看 结果 。 表 1-2 比较 


了 压缩 前 后 


的 文本 资源 。 
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表 1-2 比较 应 用 服务 器 压缩 前 后 客户 网 站 上 文本 资源 EN 
资源 文件 名 压缩 前 大 小 压缩 后 大 小 压 缩 量 
index.html 4KB 1.8 KB 55% 
style.min.css 15.9 KB 3.1 KB 80.5% 
jquery.min.js 84.7 KB 30 KB 64.5% 
behaviors.min.js 1.9 KB 1.1 KB 42.1% 
合计 106.5 KB 36 KB 66.2% 


文件 的 体积 显著 减 小 : 压缩 前 ， 所 有 文本 资源 的 大 小 合计 为 106.5 KB; 压缩 后 ,体积 大 约 减 
小 66%， 低 至 36 KB! 那么 这 对 加 载 时 间 有 什么 影响 呢 ? 答案 是 影响 不 小 。 图 1-12 比较 了 不 同 
设备 的 加 载 时 间 。 


SS cc 
科目 国 下 和 
苹 3sr 
Ey 
将 
2s 上 
ls rc 
0s 
移动 端 动 端 桌面 端 桌面 端 
(高 DPI) (高 DPI) 


图 1-12 应 用 压缩 前 后 ， 客 户 网 站 在 Regular 3G 节 流 配置 下 的 加 载 时 间 。 根 据 访问 者 
的 设备 不 同 ， 加 载 速度 提高 18%~32% 
这 个 简单 的 操作 显著 提高 了 网 站 的 加 载 速度 。 需 要 注意 的 是 ， 不 同 的 Web 服务 器 需要 不 同 
的 操作 来 配置 资源 压缩 。 代 码 清单 1-2 显示 了 如 何在 Apache Web 服务 器 的 httpd.conf 配置 文件 中 ， 
为 常见 的 资源 媒体 类 型 启用 压缩 。 


代码 清单 1-2 在 Apache Web 服务 器 上 启用 服务 器 压缩 


检查 是 否 已 经 加 载 了 
mod_deflate 模块 压缩 文件 ， 这 些 文 件 
匹配 指定 的 内 容 类 型 
<IfModule mod_ deflate.c> 


AddOutputFilterByType DEFLATE text/html text/css text/javascript 
</IfModule> 
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在 微软 的 Internet 信息 服务 (IIS ) 中 ， 可 以 通过 inetmgr 可 执行 文件 进入 管理 面板 ， 转 到 
特定 网 站 ， 并 通过 实用 工具 的 GUI 编辑 压缩 设置 来 配置 压缩 。 无 论 使 用 哪 种 Web 服务 器 ， 压 缩 
带 来 的 好 处 基本 都 一 样 。 某 些 服务 器 的 可 配置 项 可 能 更 丰富 ， 也 可 能 更 少 。 

应 用 压缩 并 在 客户 网 站 上 工作 后 ， 可 以 继续 进行 此 优化 计划 的 最 后 一 部 分 : 优化 图 像 。 


压缩 小 技巧 
你 试 过 压缩 JPEG 或 MP3 文件 吗 ? 这 不 仅 不 会 缩小 体积 ， 而 且 最 终 的 压缩 文件 可 能 会 更 
大 。 这 是 因为 这 些 类 型 的 文件 在 编码 时 已 经 被 压缩 了 。 其 压缩 方式 和 Web 上 的 内 容 没 什么 不 
同 。 要 注意 避免 压缩 那些 已 经 在 编码 时 使 用 压缩 的 文件 类 型 ， 例如 JPEG、PNG 和 GIF 图 像 ， 
以 及 WOFF 和 WOFF2 字体 文件 。 


1.4.3 ”压缩 图 像 

自从 Photoshop 的 Save for Web ( 存储 为 Web 格式 ) 对 话 框 问世 以 来 ， 图 像 优 化 发 展 已 久 。 
如 今 的 图 像 优化 方法 在 减 小 全 色 图 像 的 文件 大 小 方面 非常 高 效 ， 最 终结 果 通 常 与 源 图 像 难以 分 
辨 。 然而， 缩小 文件 是 非常 重要 的 。 图 1-13 比较 了 优化 前 后 的 两 个 图 像 。 


压缩 前 压缩 后 
(30.87KB) (11.69 KB) 


图 1-13 PNG 图 像 优 化 。 这 种 图 像 优化 方式 使 用 了 一 种 重新 编码 技术 ,该 技术 可 以 
丢弃 图 像 中 不 必要 的 数据 ， 而 不 会 明显 影响 图 像 的 视觉 质量 


如 果 你 看 不 出 这 两 张 图 像 之 间 的 区 别 , 那 这 种 方法 的 使 用 目的 就 达到 了 。 这 种 类 型 的 优化 背 
后 的 理念 是 尽 可 能 保留 源 图 像 的 视觉 质量 ， 同 时 丢弃 不 必要 的 数据 。 

这 并 不 是 说 这 种 优化 不 会 导致 不 合 预期 的 结果 。 过 度 优化 会 导致 明显 的 质量 损失 。 第 6 章 不 
仅 会 探讨 PNG 文件 的 图 像 优 化 ， 而 且 还 会 探讨 JPEG 和 SVG 图 像 的 优化 。 经 验 法 则 是 将 任何 优 
化 的 结果 与 原始 图 像 进 行 比较 ， 并 确保 你 对 结果 满意 。 

有 许多 服务 可 以 压缩 图 像 ， 包 括 第 6 章 和 第 12 章 介 绍 的 一 些 命令 行 和 自动 化 工具 。 为 了 简 
单 起 见 ， 你 可 以 使 用 名 为 TinyPNG 的 Web 服务 ， 如 图 1-14 所 示 。 
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Shrink PNG files 


Advanced lossy compression for PNG images that preserves full alpha transparency. 
图 1-14 TinyPNG 压缩 客户 网 站 的 图 像 ， 并 报告 成 功 将 总 大 小 减 小 61% 
尽管 名 字 中 带 有 PNG， 但 这 个 网 站 不 仅 能 压缩 PNG 图 像 ， 而 且 还 能 压缩 JPEG 图 像 。 根 据 


访问 者 的 设备 不 同 ， 桌面 端 视 图 中 显示 4 个 图 像 ， 而 移动 端 视图 中 仅 显 示 3 个 图 像 。 这 些 图 像 的 
大 小 取决 于 查看 它们 的 屏幕 类 型 。 高 DPI 屏幕 (如 苹果 设备 上 的 视网膜 屏幕 ) 需要 更 大 的 图 像 集 
来 提供 最 佳 的 视觉 体验 , 而 标准 DPI 屏幕 可 以 使 用 更 小 的 图 像 集 。 第 5 章 将 介绍 这 些 屏 幕 之 间 的 
差异 ， 以 及 基于 设备 功能 的 服务 方式 。 此 刻 , 我 们 的 目标 是 获取 img 文件 夹 中 的 所 有 图 像 , 使 用 


TinyPNG 服务 对 其 进行 优化 ， 并 观察 获得 的 效果 。 


要 压缩 这 些 图 像 ， 请 将 它们 上 传 到 TinyPNG 网 站 ， 该 网 站 将 自动 进行 优化 。 完 成 后 ， 下 载 
所 有 文件 ， 并 将 其 复制 到 网 站 的 img 文件 夹 。 出 现 提 示 时 ， 为 所 有 冲突 选择 Overwrite ( 覆盖 ) 


选项 。 然 后 重新 加 载 页 面 ， 在 Chrome 的 开发 者 工具 
所 产生 的 差异 。 表 1-3 列 出 了 优化 前 后 的 网 站 图 像 。 


再 次 检查 瀑布 图 ， 以 查看 这 些 较 小 的 图 像 


表 1-3 使 用 TinyPNG Web 服务 优化 前 后 的 图 像 大 小 


资源 文件 名 压缩 前 大 小 压缩 后 大 小 压 缩 量 
bg.png 56.6 KB 32.0 KB —43% 
bg@2x.jpg 147.4 KB 29.4 KB —80% 
brothers.jpg 11.9 KB 9.7 KB —18% 
brothers(@®2x.jpg 33.8 KB 29.8 KB —12% 
logo.png 31.6 KB 12.0 KB —62% 
logo@2x.png 70.5 KB 25.2 KB —64% 
states.png 4.9 KB 1.8 KB —63% 
states(@2x.jpg 9.6 KB 3.5 KB —63% 


表面 看 来 ,所 有 图 像 都 在 不 同 程度 上 受益 于 这 种 优化 ， 当 然 , 某 些 图像 受 益 更 多 一 些 。 但 真 
正 的 问题 是 ， 这 将 如 何 影 响 页 面 加 载 时 间 ? 图 1-15 比较 了 这 次 图 像 优 化 工作 前 后 的 加 载 时 间 。 
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图 1-15 优化 图 像 前 后 ， 客 户 网 站 在 Regular 3G 节 流 配置 下 的 加 载 时 间 。 根 据 访 问 者 
的 设备 不 同 ， 加 载 速度 提高 23%~53% 


优化 图 像 对 加 载 时 间 有 显著 影响 。 所 有 设备 的 加 载 时 间 都 已 减少 到 2 秒 以 下 , 这 是 非常 重要 
的 ,尤其 是 对 于 3G 网 络 环境 ! 完成 优化 工作 后 ， 下 面 看 看 总 体 的 工作 成 果 。 


1.5 ”最终 性 能 测试 
表 1-4 比较 了 4 个 场景 中 优化 前 后 的 服务 器 数据 传输 量 。 
表 1-4 优化 前 后 客户 网 站 在 各 种 设备 类 型 上 的 页 面 大 小 


0s 


设备 类 型 优化 前 页 面 大 小 优化 后 页 面 大 小 压 缩 量 
移动 端 (高 DPI ) 526 KB 118 KB 77.5% 
移动 端 378 KB 87.4 KB 76.8% 
桌面 端 (高 DPI) 536 KB 121 KB 77.4% 
桌面 端 383 KB 89.5 KB 76.6% 


当然 ， 你 想 看 到 优化 是 如 何 影响 加 载 时 间 的 。 图 1-16 比较 了 优化 前 后 的 加 载 时 间 。 
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图 1-16 ”进行 所 有 优化 前 后 客户 网 站 在 Regular 3G 节 流 配置 下 的 加 载 时 间 。 所 有 设备 
的 访问 者 都 节省 了 大 约 70% 的 加 载 时 间 


无 论 用 户 使 用 哪 种 设备 访问 该 站 点 ， 你 的 优化 工作 都 已 将 客户 网 站 的 加 载 速度 提高 了 近 
70%。 正 如 你 所 看 到 的 ， 即 使 是 基本 的 性 能 调 优 技术 ， 也 可 以 有 效 改 善 用 户 体验 。 目 前 我 们 只 学 
习 了 一 点 皮毛 ， 后 续 音节 会 展示 更 高 级 的 技巧 。 


1.6 ”小结 


本 章 我 们 首先 学 习 了 一 些 深 层次 的 概念 ， 指 出 为 什么 Web 性 能 很 重要 。 然 后 通过 以 下 技术 
改进 了 客户 的 网 站 : 
口 使 用 Google Chrome 的 开发 者 工具 分 析 页 面 大 小 ; 
口 通过 一 个 被 称 为 “缩小 ”的 过 程 ， 缩 减 基 于 文本 的 资源 的 大 小 ， 该 过 程 在 不 影响 资源 功 
能 的 情况 下 ， 从 资源 中 删除 不 必要 的 空白 ; 
口 通过 服务 器 压缩 ， 进 一 步 减 小 这 些 文本 资源 的 大 小 ; 
口 衡量 图 像 优 化 的 有 效 性 。 

现在 你 已 经 入 门 了 , 但 还 有 很 多 东西 要 学 。 下 一 章 将 学 习 如 何在 各 种 浏览 器 中 使 用 开发 者 工 
具 来 评估 性 能 。 


使 用 评估 工具 


本 章 内 容 

口 使 用 Google PageSpeed Insights 

口 使 用 网 络 请 求 检 查 器 查看 资源 的 计时 信息 
口 使 用 泻 染 分 析 带 诊断 欠 佳 性 能 

口 JavaScript 代码 基准 测试 

口 模拟 设备 和 互联 网 连接 


我 们 已 经 掌握 了 Web 性 能 的 概念 ， 并 且 优 化 了 客户 的 网 站 ， 下 面 开 始 深入 人 研究 一 一 从 学 习 
识别 性 能 问题 的 工具 开始 。 这 些 工 具 既 有 在 线 版 本 ， 也 有 在 浏览 器 本 地 运行 的 ， 我 们 从 Google 
的 PageSpeed Insights 开始 ， 延 伸 到 Chrome 和 其 他 桌面 浏览 器 中 可 用 的 工具 。 


2.1 使 用 Google PageSpeed Insights 进行 评估 


众所周知 ，Google 一 直 关 注 Web 性 能 。 早 在 2010 年 ，Google 就 在 一 篇 博文 中 指出 ,性 能 是 
影响 网 站 自然 搜索 结果 排名 的 一 个 因素 。 如 果 你 运行 的 网 站 由 内 容 驱动 , 且 大 部 分 流量 来 自 搜索 
引擎 ， 这 就 会 让 你 停 下 来 。 好 在 Google 有 一 个 评估 工具 : PageSpeed Insights。 


2.1.1 评估 网 站 性 能 


Google PageSpeed Insights 会 分 析 网 站 ， 并 就 如 何 改进 其 性 能 和 用 户 体验 给 出 提示 。 妆 
Pagespeed Insights 呈 现 分 析 时 ， 它 会 执行 两 次 : 第 一 次 使 用 移动 用 户 代理 ， 第 二 次 使 用 桌面 用 户 
代理 。 它 分 析 性 能 时 考虑 两 个 关键 因素 : 折 肢 线 以 上 内 容 "加 载 所 需 的 时 间 ， 以 及 整个 页 面 加 载 
所 需 的 时 间 。 图 2-1 说 明了 折 羞 线 上 下 的 概念 。 


三 


户 不 需要 滚动 窗口 即 可 看 到 的 内 容 。 一 一 译 考 注 
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Web site! 
和 加 月 |Q http:/www.website.com 


折 簿 线 之 上 


折 益 线 之 下 


图 2-1 Google PageSpeed Insights 检查 页 面 速度 的 两 个 方面 : 折 羞 线 以 上 内 容 的 加 载 
时 间 (用 户 访 问 页 面 时 立即 看 到 的 内 容 ) 和 整个 页 面 的 加 载 时 间 
该 工具 会 对 两 个 用 户 代 理 分 别 给 出 0~100 的 分 数 , 并 根据 发 现 的 问题 的 严重 性 给 出 其 推荐 的 
颜色 代码 。 黄 色 表 示 在 时 间 允 许 的 情况 下 应 该 修复 的 小 问题 ,而 红色 表示 必须 修复 的 问题 。 通 过 
的 性 能 点 则 用 绿色 表示 。 图 2-2 显示 了 一 份 示例 报告 。 针 对 PageSpeed Insights 发 现 的 问题 , 解决 
方案 有 很 多 , 后 面 的 章节 都 将 介绍 。 在 第 1 章 中 优化 客户 网 站 时 ,， 我们 就 采取 过 一 些 步 又 ,例如 
缩小 资源 、 配 置 压缩 和 优化 图 像 。 


用 户 输入 
网 站 URL Te 
http://www.twitter.com/ Ee 
日 Mobile 区 加 Deskto 
由 移动 端 和 昌 面 端 _ 一 了 i 
生成 的 报告 


Speed 


报告 问题 的 同时 ， 一 一 回 should Fix: 
也 提供 修改 建议 Avoid landing page redirects 


» Show how to fix 


Eliminate render-blocking JavaScript and CSS in above-the- 
fold content 


» Show how to fix 
Consider Fixing: 


Prioritize visible content 


» Show how to fix 


图 2-2 Google PageSpeed Insights 为 网 站 的 移动 端 视图 打分 。 用 户 输 入 URL， 工 具 会 
根据 问题 严重 性 给 出 性 能 提示 ， 并 按照 移动 端 和 桌面 端的 状态 进行 分 组 


体验 Google PageSpeed Insights 的 方法 之 一 是 在 第 1 章 的 客户 网 站 上 运行 它 。 由 于 PageSpeed 
Insights 无 法 检查 本 地 计算 机 上 的 URL, 所 以 我 在 公共 Web 服务 器 上 托管 了 未 优化 版 本 和 优化 版 
本 的 客户 网 站 。 可 以 在 PageSpeed Insights 中 输入 以 下 URL， 并 比较 每 个 报告 的 输出 结 
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口 http:/jlwagnernet/weboptch01-exercise-pre-optimizationy/ 


口 http:/jlwagnernet/webopt/ch01-exercise-post-optimizationy/ 
输入 URL 并 单 击 Analyze 进行 分 析 后 ， 需 要 等 待 一 分 钟 生成 报告 。PageSpeed Insights 完成 
后 ， 你 将 看 到 移动 端 和 桌面 端的 选项 卡 ， 以 及 每 个 选项 卡 的 得 分 。 程 序 的 输出 如 图 2-3 所 示 。 


日 Mobile 型 Deskt | Mobile | Euesuo 
Speed A Speed 


Should Fix: Consider Fixing: 
Enable compression Eliminate render-blocking JavaScript and CSS in 
+ Show how to fx above-the-fold content 
+ Show how to fix 
Minify JavaScript 
*Show how to fix 
区 9 Passed Rules 
Consider Fixing: * Show details 


Eliminate render-blocking JavaScript and CSS in 


bove-the-fold content 
ha lA User Experience 


+ Show how to fx 


Leverage browser caching 区 Congratulations! No issues found. 


+ Show how to fx 

Avoid app install interstitials that hide content 
Optimize images Your page does not appear to have any app install 
+» Show how to fix interstitials that hide a significant amount of content. 


优化 前 优化 后 


图 2-3 ”PageSpeed Insights 针对 第 1 章 中 的 客户 网 站 给 出 的 报告 ， 分 别 为 网 站 优化 前 〈 左 ) 
和 网 站 优化 后 ( 右 ) 


大 多 数 建议 是 你 在 第 1 章 中 修复 过 的 性 能 问题 ， 包 括 缩小 文本 资源 (如 HTML、CSS 和 
JavaScript )、 启 用 压缩 等 。 

你 可 能 会 在 报告 中 看 到 网 站 优化 版 本 存留 的 问题 , 这 会 阻止 你 获得 更 高 的 分 数 , 因为 样式 表 
加 载 完 成 之 前 ,用 于 加 载 CSS 块 的 <1ink> 标 签 会 一 直 阻 止 页 面 泻 染 。 可 以 通过 将 CSS 敬 入 HTML 
的 <style> 标 签 来 解决 这 一 问题 ， 从 而 使 CSS 与 HTML 同时 加 载 。 

一 般 来 说 ， 内 联 被 认为 是 某 种 反 模 式 ， 对 缓存 有 不 利 影响 。 但 它 确实 减少 了 HITP 请 求 ， 这 
对 HTTP/1 服务 器 是 有 好 处 的 ， 并 且 能 够 提高 文档 的 泻 染 速度 。 

第 4 章 会 介绍 一 种 名 为 关键 CSS 的 技术 ， 它 可 以 提高 页 面 的 泻 染 速度 。 对 于 HTTP/1 的 客 
户 端 /服务 器 端 交 互 来 说 , 这 是 一 种 有 效 的 技术 , 但 是 HTTP/2 中 名 为 服务 器 推送 的 功能 是 这 种 反 
模式 的 替代 方案 。 要 了 解 更 多 信息 ， 请 参见 第 10 章 。 

接 下 来 ， 你 将 学 习 如 何 使 用 Google Analytics 检索 多 个 页 面 的 PageSpeed Insights 数据 ， 从 而 
更 深入 地 理解 整个 网 站 的 性 能 。 


Py 
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2.1.2 ”使 用 Google Analytics 进 行 批量 报告 

如 果 你 是 专业 Web 开发 者 ， 那 很 可 能 使 用 过 Google Analytics。 这 个 报告 工具 提供 了 网 站 访 
间 者 的 数据 ， 例 如 其 位 置 、 如 何 到 达 你 的 网 站 、 在 哪里 花费 了 多 少时 间 ， 以 及 其 他 统计 信息 。 与 
本 章 相关 的 是 此 工具 中 提供 的 PageSpeed Insights 数据 。 
如 果 你 的 网 站 上 已 经 有 Google Analytics， 那 么 你 要 做 的 就 是 登录 并 跟 进 。 如 果 你 尚未 在 网 
站 上 安装 它 , 请 使 用 Google 账户 登录 http:/www.google.comy/analytics， 并 按照 说 明 进 行 操作 。 这 
个 过 程 只 需 花 费 很 少 的 时 间 ,， 并 且 需 要 将 一 小 段 JavaScript 代码 粘贴 到 站 点 的 HTML 中 。 之 后 需 
要 等 一 到 两 天 ， 让 Google Analytics 收集 数据 。 


法 律 问题 
请 注意 ， 向 网 站 添加 Google Analytics 会 带 来 法 律 问 题 。 安 装 跟踪 代码 时 ， 你 要 接受 法 律 
协议 的 条 款 。 如 果 你 是 网 站 的 唯一 拥有 者 ,那么 可 以 自行 决定 , 否则 一 定 要 得 到 网 站 拥有 者 的 
同意 。 如 果 你 是 一 家 大 公司 的 开发 人 员 , 这 一 点 很 重要 , 因为 法 律 审查 在 大 公司 是 常见 的 流程 。 


登录 后 将 被 重 定向 到 网 站 的 仪表 板 。 转 到 左 侧 菜 单 中 的 Behavior (行为 ) 部 分 ， 展开 它 以 显 
示 子 菜单 ， 如 图 2-4 所 示 。 


回 ”Behavior 
Overview 
Behavior Flow 
» Site Content 
Site Speed 
Overview 
Page Timings 


Speed Suggestions 


User Timings 


图 2-4 通过 导航 到 左 侧 菜单 上 的 Behavior 部 分 ， 并 点 击 Speed Suggestions ( 速度 建议 ) 
链接 ， 可 以 在 Google Analytics 中 访问 PageSpeed Insights 的 报告 信息 


进入 这 个 部 分 后 ， 你 将 看 到 一 个 带 有 性 能 统计 信息 的 仪表 板 ， 如 图 2-5 所 示 。 其 中 绘制 了 上 
一 个 报告 周期 内 ， 网 站 所 有 页 面 访问 的 平均 加 载 时 间 折 线 图 ， 以 及 包含 以 下 列 的 表格 。 
口 Page 一 一 页 面 URL。 


口 PageViews 一 一 报告 周期 内 页 面 的 浏览 次 数 。 报 告 周期 通常 是 前 一 个 月 ， 但 可 以 更 改 为 自 
定义 的 时 间 段 。 
口 Avg. Page Load Time 一 一 页 面 加 载 的 平均 用 时 ， 单 位 是 秒 。 
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口 PageSpeed Suggestions 一 一 PageSpeed Insights 为 提升 相关 页 面 URL 的 性 能 , 给 出 的 建议 数 
量 。 单 击 这 个 值 将 跳 转 到 一 个 新 窗口 ， 其 中 包含 该 URL 的 PageSpeed Insights 报告 

口 PageSpeed Score 一 一 PageSpeed Insights 报告 给 出 的 分 数 。 该 分 数 的 范围 为 1~100， 分 数 低 
表示 有 改进 的 空间 ， 分 数 高 表示 性 能 特征 好 。 


由 PageSpeed Insights 生 由 PageSpeed Insights 
成 的 建议 和 报告 链接 生成 的 得 分 


了 


Avg. Page PageSpeed 


Page Eageviews LoadTime Suggestions 0 
(sec) 

1. /eq-tips/ 1,961 9.08 8 total 中 75 
2. /marshall-shoppers-guide-1/ 1,812 7.81 8 total 吧 ol 
3. /vintage-style-pickups-explored-2/ 1,791 6.01 7 total 归 了 
4. /edward-van-halen-brown-sound/ 1,406 6515 7 total 中 74 
5. 1 1,099 5.38 8 total 中 70 
6. /marshall-shoppers-guide-2/ 1,019 12.97 9 total 吕 72 


图 2-5 Google Analytics 的 性 能 统计 报表 。 请 注意 最 右边 的 两 列 是 PageSpeed Insights 
特定 数据 和 相关 URL 页 面 的 报告 链接 


可 惜 的 是 ， 你 不 能 对 PageSpeed Suggestions 和 PageSpeed Score 两 列 进 行 排序 ， 但 是 可 以 对 
其 他 三 列 进行 排序 。 解决 问题 时 , 可 以 按 页 面 的 浏览 量 降序 排列 , 并 修复 最 受 欢迎 的 内 容 的 问题 。 
现在 ， 我 们 已 经 了 解 了 关于 PageSpeed Insights 的 一 些 知 识 以 及 用 法 ， 下 面 学 习 使 用 浏览 器 
中 的 工具 。 


2.2 ”使 用 基于 浏览 器 的 评估 工具 


桌面 浏览 器 提供 了 许多 工具 。 所 有 浏览 絮 都 附带 一 套 开 发 者 工具 ,它们 的 功能 大 同 小 异 , 彼 
此 可 以 取长补短 。 本 节 会 提 到 Google Chrome 、Mozilla Firefox 、Safari 和 Microsoft Edge 浏览 器 ， 
其 中 会 特别 关注 Chrome 的 开发 工具 。 


跨 浏 览 器 开发 工具 的 相似 性 

除非 另 有 说 明 ， 否 则 在 不 同 浏览 器 中 访问 类 似 功能 与 在 Chrome 中 类 似 。 以 Firefox 为 例 : 

和 在 Chrome 中 一 样 ， 你 可 以 打开 Firefox 开发 者 工具 ， 单 击 Network 选项 卡 ， 点 击 瀑布 图 中 的 
一 个 条 目 ， 然 后 找到 时 间 细 节 。Microsoft Edge 中 也 是 如 此 。 


在 任何 浏览 器 中 ， 打 开 开 发 者 工具 的 方法 都 是 相同 的 。 在 Windows 系统 上 可 以 用 F12 键 打 
开 ， 在 Mac 上 可 以 按 Cmd+Alt+I 打 开 。 
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本 章 并 不 是 每 一 个 浏览 器 开发 工具 的 百科 全 书 般 的 资源 , 会 涵盖 每 一 个 细节 ,因为 那样 的 资 
源 很 容易 成 为 使 用 手册 。 相 反 ， 我 们 的 目标 是 从 Chrome 开始 ， 突 出 这 些 工具 在 所 有 浏览 器 中 都 
可 以 使 用 的 共性 ， 同 时 突出 其 他 浏览 器 中 的 一 些 显著 差异 。 


2.3 ”检查 网 络 请 求 


回想 第 1 章 ， 我 们 曾 在 客户 网 站 中 使 用 过 Chrome 的 网 络 工 具 生 成 网 站 资源 的 瀑布 图 ， 并 计 
算 页 面 加 载 时 间 。 浏 览 器 中 大 多 数 网 络 检 查 工具 的 工作 原理 与 Chrome 类 似 ， 它 们 可 以 生成 瀑布 
图 ,但 这 仪 仅 是 基本 功能 。 本 节 将 介绍 如 何 使 用 实用 工具 查看 单个 资源 的 计时 信息 ， 以 及 如 何 查 
看 HTTP 头 部 。 


2.3.1 查看 计时 信息 


在 第 1 章 开头 ， 我 们 讨论 了 Web 浏览 器 如 何 与 Web 服务 器 通信 ， 以 及 数据 交换 中 国有 的 延 
述 。 图 2-6 中 描述 的 所 有 步骤 都 会 产生 延迟 。 其 中 一 个 重要 的 度量 标准 称 为 首 字 节 时 间 ( Timeto 
First Byte, TTFB ), 即 从 用 户 请 求 网 页 到 响应 的 第 一 个 字 节 到 达 之 间 的 时 间 。 这 与 加 载 时 间 不 同 ， 
加 载 时 间 是 资源 完全 完成 下 载 所 需 的 时 间 。 图 2-6 ( 和 第 1 章 中 的 图 一 样 ) 说 明了 这 一 概念 。 


> Web 器 
2 1. 用 户 发 送 请 求 到 example.com hi 


2. 用 户 等 待 响 应 


o 


3. 用 户 从 example.com 下 载 页 面 


图 2-6 Web 浏览 器 请 求 Web 服务 器 的 过 程 。 延 迟 发 生 在 整个 过 程 的 每 个 步 又 中 。 


从 用 户 发 出 请 求 到 响应 到 达 之 间 的 时 间 ， 称 为 首 字 节 时 间 (TTFB ) 


导致 TTFB 较 长 的 原因 有 很 多 。 这 可 能 是 网 络 条 件 造 成 的 ， 例 如 服务 器 与 用 户 的 物理 距离 、 
服务 器 性 能 差 或 者 应 用 程序 后 端 出 现 问 题 。 开始 下 载 内 容 所 需 的 时 间 越 长 , 用 户 等 待 的 时 间 就 越 长 。 

要 了 解 一 个 请 求 所 花费 的 时 间 ， 可 以 在 Chrome 中 查看 其 完成 情况 。 在 大 多 数 浏览 器 中 找到 
这 些 信 息 的 步骤 是 类 似 的 ( Safari 除外 , 稍 后 讨论 ), 首 先 ,请 打开 Chrome 开发 者 工具 中 的 Network 
选项 卡 ， 然 后 执行 以 下 步 又。 

(1) 用 数据 填充 瀑布 图 ， 如 果 你 还 没有 这 样 做 的 话 。 可 以 在 第 1 章 中 详细 了 解 具体 做 法 ， 但 
最 简单 的 方法 是 : 在 开发 者 工具 被 打开 且 Network 选项 卡 处 于 活动 状态 时 ， 重 新 加 载 站 点 。 

(2) 填充 瀑布 图 之 后 ， 可 以 点 击 任何 资源 条 目 并 查看 其 计时 信息 。 

完成 这 些 步 又 后 , 你 将 看 到 如 图 2-7 所 示 的 内 容 。 从 图 中 可 以 看 到 , TTFB 值 在 Chrome 中 标 
记得 很 清楚 。 发 出 请 求 之 前 还 会 执行 一 些 步 又, 例如 排队 请 求 、DNS 查找 、 连 接 设置 和 SSL 握手 。 
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s private, no-cache, max-age=3600 br [| 

§ 

§ 

] Queueing 8.59 ms 
Stalled 0.84 ms 

| DNS Lookup 图 17.45 ms 

§ nitial connection 87.97 ms 

§ ssL Em 51.25 ms 

§ 

| Request sent 0.12 ms 

Waiting (TTFB) 174.56 ms 

§ Content Download | 52.56 ms 

j Explanation 342.30 ms 

§ 


图 2-7 网 站 资源 的 计时 信息 。 本 例 中 的 TTFB 为 174.56 ms 
有 关 DNS 查找 的 说 明 
为 了 消除 DNS 查找 的 延迟 ， 浏 览 器 会 创建 一 个 DNS 查找 缓存 。 如 果 一 个 域名 的 对 应 IP 
地 址 不 在 缓存 中 ， 则 查找 他 地址 将 导致 延迟 。 但 是 重复 请 求 时 ，IP 地 址 将 被 缓存 以 消除 后 续 
请 求 的 延迟 。 


大 多 数 浏览 器 允许 以 类 似 的 方式 访问 此 类 信息 , 但 Safari 有 点 不 同 。 首先 你 可 能 需要 启用 开发 
者 工具 。 查 看 工具 是 否 被 启用 的 一 个 快速 方法 是 , 在 屏幕 项 部 查找 Developer 菜单 ， 如 图 2-8 所 示 。 


特 ”Safari File Edit View History Bookmarks Develop Window Help 


2-8 只 有 当 Safari 的 Web 浏览 器 是 当前 活动 窗口 ， 且 菜单 栏 中 的 Developer 选项 可 见 时 ， 
才能 使 用 Safari 开发 者 工具 。 如 果 没 有 看 到 此 菜单 ， 则 必须 启用 开发 者 工具 


如 果 Developer 菜单 不 可 见 ， 请 点 击 Safari 菜单 ， 然 后 点 击 Preferences ( 偏好 设置 )。 当 窗口 
打开 时 , 转 到 Advanced 选项 卡 , 并 选中 Show Develop menu in menu bar( 在 菜单 栏 中 显示 Develop 
菜单 ) 复 选 框 ， 如 图 2-9 所 示 。 切 换 Develop 菜单 后 ， 退 出 Preferences 窗口 ， 然 后 按 Cmd+Alt+I 
打开 开发 者 工具 。 


Default encoding: Western (ISO Latin 1) 


Proxies: Change Settings... 


WA Show Develop menu in menu bar ? 


勾 选 以 允许 使 用 
开发 者 工具 


图 2-9 可 以 通过 从 菜单 栏 中 选择 Safari>Preferences， 启 用 Safari 开发 者 工具 。 在 出 现 
的 窗口 中 ， 单 击 Advanced 选项 卡 并 选中 复 选 框 


2.3 ”检查 网 络 请 求 27 


在 开发 者 工具 中 , 可 以 单 击 Network 选项 卡 ， 然 后 转 到 第 1 章 优化 后 的 客户 网 站 。 从 图 2-10 
中 可 以 看 到 ， 虽 然 Safari 版 本 的 Network 选项 卡 缺 少 瀑布 图 , 但 它 显示 了 计时 数据 表 。 在 这 个 例 
子 中 ， 可 以 看 到 Latency 、Start Time 和 Duration 列 。 


”a 应 四 De A1i912KB O764ms CE er 

Elements 因 consoe © Timelines 证 bebugger cD Resources | @ Network 号 storage | 十 
Documentss | < > a 
Name Domain Type Method Scheme Status | Cached Size | Transferred | Start Time 人 Latency Duration 
<3 ch01-exercise-post-optimization jlwagner.net Document GET HTTP 200 No 3.71 KB 4.10 KB Oms 389.7ms 8.971ms 
加 styles.min.css jlwagner.net Stylesheet GET HTTP 200 No 15.60 KB 3.13 KB | 397.3ms | 115.5ms 2.477ms 
| jquery.min.js jlwagner.net Script GET HTTP 200 No 84.41 KB 84.82 KB 398.2ms 200.3ms 165.4ms 
问 behaviors.min.js jiwagnernet | Script GET HTTP 200 No 1.66 KB 1.10 KB | 398.3ms | 195.2ms | 0.394ms 
团 bg@2x.jpg jlwagner.net Image GET HTTP 200 No 28.68 KB 29.03 KB 515.8ms 95.71ms 72.47ms 
四 | logo@2x.png jlwagnernet Image GET HTTP 200 No 24.63 KB 24.98 KB | 519.3ms 150.6ms 94.19ms 
| brothers@2x.jpg jiwagner.net | Image GET HTTP 200 No 29.07 KB 29.42 KB 520.5ms 153.2ms 90.57ms 
晤 states@2x.png jlwagnernet Image GET HTTP 200 No 3.46 KB 3.81 KB | 520.7ms 156.9ms 0.385ms 
| favicon.ico jlwagner.net XHR GET HTTP 200 No 一 266B 808.6ms 151.3ms 0.318ms 

~ 人 二 位 “Eye 
图 2-10 ”Safari 开发 者 工具 的 Network 选项 卡 中 ， 网 站 的 网 络 请 求 信息 。 请 注意 ， 
+ fh 中 > 十 日 一 、 信 
此 视图 中 缺少 了 瀑布 图 ， 但 它 提供 了 显示 计时 信息 的 列 


Latency 列 与 其 他 浏览 器 工具 中 看 到 的 TTFB 值 不 同 。TTFB 不 包括 诸如 DNS 查找 等 步 又 和 
连接 到 Web 服务 器 所 花费 的 时 间 ， 只 包括 发 出 请 求 所 需 的 时 间 以 及 资源 开始 下 载 的 时 间 。 而 延 
述 包 括 TTFB 加 上 发 出 请 求 前 的 所 有 步 又 。 

下 一 节 将 进一步 使 用 浏览 器 的 开发 者 工具 , 检查 网 站 资源 的 HTTP 头 部 ,以 查看 内 容 请 求 中 
的 详细 信息 ， 并 了 解 服务 器 是 如 何 响应 这 些 请 求 的 。 


2.3.2 ”查看 HTTP 请 求 和 响应 头 


所 有 浏览 器 开发 者 工具 的 另 一 个 用 途 是 检查 HTTP 头 部 , 其 信息 会 随 浏览 器 对 内 容 的 请 求 和 
来 自 Web 服务 器 的 响应 一 起 传输 。 在 图 2-11 中 ， 可 以 看 到 典型 的 请 求 /响应 图 ， 它 显示 了 伴随 请 
求 和 响应 的 HITP 头 部 (尽管 该 示例 比 实际 中 简单 得 多 )。 


GET /index.html HTTP/1.1 


1. 用 户 发 送 请 求 Host: jeremywagner.me 2.Web 服 务 器 响应 
Accept: text/html 
User-Agent: Mozilla/5.0 
O 
| </> |~< 


index.html 


HTTB71,1 200 OK 
Content-Length: 47044 
Content-Type: text/html 


图 2-11 HITP 头 部 会 随 浏 览 器 初始 请 求 和 服务 器 响应 一 起 发 送 。 本 图 显示 了 一 组 简化 的 头 部 
言 息 。 每 个 浏览 器 开发 者 工具 中 的 网 络 检查 工具 都 允许 用 户 检查 这 些 头 部 信息 
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这 些 头 部 包括 了 基本 信息 ， 如 响应 码 、 支 持 的 媒体 类 型 、 请 求 的 主机 等 。 但 头 部 也 可 以 包括 
性 能 指标 。 图 2-12 显示 了 如 何在 Chrome 中 查看 HTTP 头 部 。 在 Network 选项 卡 下 ， 单 击 资源 名 
称 ， 右 侧 的 单独 窗 格 中 将 显示 其 请 求 和 响应 头 部 。 


Name x Headers Preview Response Cookies Timing 


国 css?family=Montserrat:700|Tinos...| v General 


国 global.css?v=e48e2aa8 Request URL: https://jeremywagner.me/css/global.css?v=e48e2aa8 


,_ fonts-loaded.css?v=6503a7c8 


Request Method: GET 
Status Code: ® 200 
Remote Address: 107.170.44.108:443 


v Response Headers 
accept-ranges: bytes 
cache-control: max-age=2592000 
content-encoding: br 
content-length: 1976 
content-type: text/css 
date: Fri, 11 Nov 2016 19:29:11 GMT 


单 击 资源 名 称 显 last-modified: Sun, 686 Nov 2016 23:01:44 GMT 
a 王仁 Server: Apache 
示 HTTP 请 求 信息 和 


vary: Accept-Encoding 


图 2-12 在 Chrome 的 开发 工具 中 查看 HTTP 头 部 。 可 以 通过 点 击 资源 名 称 访问 资源 的 
HITP 头 部 。 右 侧 会 打开 一 个 新 窗 格 ， 头 部 信息 包含 在 Headers 选项 卡 中 


一 个 性 能 相关 的 头 部 的 例子 是 content-Encoqing 响应 头 。 这 个 头 能 够 表明 一 个 资源 是 否 
被 Web 服务 需 压 缩 了 。 

设置 自己 的 服务 器 时 ， 你 可 能 知道 是 否 启 用 了 压缩 。 如 果 在 不 熟悉 的 主机 环境 中 工作 , 并且 
不 确定 是 否 已 经 启用 了 压缩 ， 就 可 以 检查 响应 头 。 图 2-13 显示 了 优化 后 的 客户 网 站 中 jqueryjs 的 
响应 头 。 


了 Response Headers 
Accept-Ranges: bytes 
Cache-Control: max-age=31536000 
Content-Encoding: gzip 


/ 


指明 压缩 资源 


图 2-13” Web 服务 器 的 content-Encoding 响应 头 可 以 用 于 确定 资源 是 否 已 被 压缩 ， 
以 及 所 使 用 的 压缩 算法 ( 本 例 中 为 gzip ) 


当 服 务 器 压缩 内 容 时 ， 它 会 用 content-Encoding 头 进行 响应 。 可 以 使 用 开发 者 工具 检查 
响应 , 以 查看 其 实际 效果 。 当然 , 这 并 不 是 使 用 这 个 工具 的 全 部 目的 。 它 对 于 检查 与 缓存 、cookie 
和 其 他 信 息 相 关 的 头 部 也 很 有 用 。 可 以 将 头 部 检查 理解 为 诸多 开发 者 工具 之 一 ! 

其 他 浏览 器 中 的 大 多 数 工 具 显 示 这 些 信息 的 方式 都 与 Chrome 相同 。Firefox 的 开发 工具 使 用 

与 Chrome 相同 的 流程 。Microsoft Edge 也 使 用 相同 的 流程 , 但 它 不 打开 右 侧 的 信息 窗口 ， 而 是 要 
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求 用 户 通过 单 击 一 个 小 的 切换 按钮 来 显 式 地 打开 ， 如 图 2-14 所 示 。 


单 击 以 显示 
HTTP 头 部 


Emulation 


Name/ a | Result/ Initiato 
path protocol Metho 。 Description Content type 。 Received Time Type 
.me/webopt/chO1-e... 
httpi//jeremywagnerme/webopt/chO1-exercise-post-optimiz,. HTTP 。 GET 200 text/html 35KB 358.77 ms document tosh 
OK 
loader'gif HTp GE 200 image/gif 386KB 132.19 ms image 
httpy/Jeremywagner,me/Wwebopt/ch01-exercise-post- zation OK 


4 Request Headers 


logo.png HTTP GET 200 image/png 894KB 145.72 ms image 

httpy/jeremywagn izatio OK | Accept: application/Javascnipt, "/; 9q=0.8 
marquee_cal HTTP GET 200 image/png 382B 210.13 ms image 

http://jer tion... OK 

brothers. HTTP -GET 200 imageyjpeg 848KB 480.93 ms image 

httpyyje 0 ation OK 

scri HTTP -GET 200 application/java... 555.67 ms script 

http: OK 

local HTTP -GET 200 imageyjpeg 281KB 353.9ms image 


webopt/chO1-ex post-optimization... OK Refen 


图 2-14 在 Microsoft Edge 中 查看 HTTP 头 部 ， 需 要 用 户 单 击 Network 选项 卡 
最 右 侧 的 一 个 小 切换 按钮 


Safari 还 要 求 用 户 通 过 一 个 小 的 切换 按钮 切换 右 侧 窗 格 ， 位 置 与 Microsoft Edge 大 致 相同 。 
这 些 工具 的 最 终结 果 是 相同 的 : 你 可 以 查看 网 站 资源 的 HTTP 头 部 ， 这 对 于 排除 故障 非常 有 用 。 
下 一 节 将 讨论 浏览 器 如 何 演 染 网 页 ,以 及 如 何 使 用 开发 者 工具 审核 页 面 ， 以 发 现 渲染 的 性 能 


问题 。 
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尽管 最 小 化 加 载 时 间 是 一 个 大 问题 , 但 是 性 能 的 另 一 个 方面 是 页 面 的 泻 染 速度 。 页 面 的 初始 
泻 染 很 重要 , 但 演 染 后 与 网 页 的 交互 是 否 顺 畅 也 不 容 忽视 。 本 节 将 介绍 页 面 演 染 的 过 程 ， 还 将 学 
习 如 何 使 用 Chrome 的 Performance 面板 、 如 何 发 现 演 染 性 能 不 佳 ， 以 及 如 何 使 用 JavaScript 标记 
时 间 线 中 的 点 ， 最 后 会 概述 其 他 浏览 器 中 的 类 似 工具 。 


2.4.1 理解 浏览 器 如 何 演 染 网 页 


用 户 访问 网 站 时 ， 浏 览 器 将 解析 HTML 和 CSS， 并 将 其 泻 染 到 屏幕 。 图 2-15 显示 了 这 个 过 
程 的 基本 情况 。 


解析 HTML 以 解析 CSS 以 


创建 DOM 创建 CSSOM 布局 元 素 


图 2-15 页 面 泻 染 过 程 


整个 过 程 的 具体 步骤 如 下 所 示 。 
(1) 解析 HTML 以 创建 DOM (Document Object Model, 文档 对 象 模型 ) 一 一 从 Web 服务 器 
下 载 HTML 时 ， 浏 览 器 会 对 其 进行 解析 以 构建 DOM， 这 是 HTML 文档 结构 的 层次 表示 。 
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(2) 解析 CSS 以 创建 CSSOM (CSS Object Model，CSS 对 象 模型 ) 一 一 DOM 建立 完成 后 ， 
浏览 器 解析 CSS 并 创建 CSSOM。CSSOM 与 DOM 类 似 ， 只 不 过 它 是 用 来 表示 将 CSS 规则 应 用 
于 文档 的 方式 。 

(3) 布局 元 素 一 一 DOM 和 CSSOM 树 组 合 创 建 演 染 树 。 然 后 泻 染 树 执行 布局 过 程 ， 在 此 过 程 
中 应 用 CSS 规则 ， 并 在 页 面 上 布局 元 素 以 创建 UI。 

(4) 绘制 页 面 一 一 文档 完成 布局 过 程 后 ， 页 面 外 观 将 应 用 CSS 和 页 面 中 的 媒体 内 容 。 绘 制 过 
程 结束 时 ， 输 出 转换 为 像素 ( 光栅 化 ) 并 在 屏幕 上 显示 。 

许多 站 点 的 大 部 分 泻 染 工 作 是 在 页 面 首次 加 载 时 完成 的 , 但 此 后 可 能 发 生 更 多 演 染 。 用 户 与 
页 面 上 的 元 素 交 互 时 ， 页 面 可 能 发 生变 化 。 这 些 变化 可 以 触发 重新 泻 染 。 

接 下 来 学 习 如 何 使 用 Performance 面板 分 析 页 面 活动 ， 并 识别 页 面 上 出 现 的 不 良 行为 。 


2.4.2 ”使 用 Google Chrome 的 Performance 面 板 

Chrome 的 Performance 面板 可 以 记录 页 面 的 加 载 、 脚 本 执行 、 泻 染 和 绘制 活动 。 乍 一 看 会 让 
人 望 而 生 旦 , 但 本 节 将 帮助 你 理解 这 个 工具 及 其 收集 的 数据 ,并 使 用 它 来 识别 性 能 问题 。 工 具 界 
面 如 图 2-16 所 示 。 


a 详细 视图 
记录 ”清除 帧 / 秒 活动 总 览 (火焰 图 ) 
@ © Capture: Networl Screenshots Memory Paint 证 No CPU throttling 了 
200ms 400 ms 1000 ms 1200 ms 1400 ms 1600 ms 1800 ms 2000ms 2200 ms 2400 ms 2600ms 280 


200 ms 400 ms 6500 ms | 800ms 1000 ms 1200 ms 1400 ms 1600 ms 1800 ms 2000ms 2200ms 2400r 2600 ms 2800 
167.3 ms 169.8ms 1353.8 ms | 244.6ms 
Interactions 


v Main 


图 2-16 已 填充 状态 下 的 Performance 面板 


2-16 的 信息 量 很 大 ， 下 面 逐 一 分 析 。 首 先 ， 我 们 要 浏览 第 1 章 客户 网 站 的 在 线 版 本 并 进 
行 分 析 。 页 面 加 载 之 后 , 访问 开发 者 工具 ， 点击 Performance 选项 卡 访 问 Performance 面板 。 你 会 
发 现时 间 线 是 空 的 ， 因 此 需要 填充 。 

我 们 首先 记录 页 面 加载 时 发 生 的 事情 。 为 此 ， 请 按 Ctrl+R (Mac 上 对 应 Cmd+R ) 重新 加 载 
页 面 。 当 Performance 面板 处 于 可 见 状态 时 ， 它 会 自动 开始 录制 。 页 面 加 载 后 ， 可 以 通过 Ctrl+E 
(Mac 上 对 应 Cmd+E ) 停止 录制 。 完 成 上 述 步骤 后 ， 时 间 线 就 会 填充 数据 。 

你 将 在 活动 概述 和 火焰 图 中 看 到 大 量 数据 。 巨 大 的 信息 量 可 能 会 今 人 感到 无 所 适 从 , 但 我 们 
可 以 从 基础 开始 。 该 工具 捕获 4 种 特定 类 型 的 事件 ， 每 种 事件 都 用 一 种 颜色 代表 。 
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口 加 载 中 〈 蓝 色 ) 一 一 网 络 相关 事件 ， 如 HTTP 请 求 。 它 还 包括 诸如 HTML 解析 、CSS 解 

析 、 图 像 解码 等 活动 。 

口 执行 脚本 黄色) 一 一 与 JavaScript 相关 的 事件 ， 包 括 特定 于 DOM 的 活动 、 垃 圾 收集 、 

特定 于 网 站 的 JavaScript、 其 他 活动 ， 等 等 。 

口 渲染 紫色 ) 一 一 与 页 面 泻 染 相关 的 所 有 事件 ， 包 括 将 CSS 应 用 于 网 页 HTML 等 活动 ， 

以 及 会 导致 重新 演 染 的 活动 ， 例 如 由 JavaScript 触发 的 对 页 面 HTML 的 更 改 。 

口 绘制 (绿色 ) 一 一 与 将 布局 绘制 到 屏幕 上 相关 的 事件 ， 例 如 层 合 成 和 光栅 化 。 
深入 研究 火焰 图 之 前 ， 先 看 看 事件 摘要 。 事 件 摘要 显示 会 话 中 上 述 每 个 类 别 花 费 的 CPU 时 

间 量 。 可 以 在 工具 窗 格 底部 的 Summary 选项 卡 看 到 摘要 ， 如 图 2-17 所 示 。 

网 络 接收 /发 送 事 件 ， 以 及 HTML、 


2 图 像 和 CSS 解 析 话 动 
范围 : 110~645 ms 

21.4 ms 轩 加 载 中 虽 JavaScript 相 关 活动 

ds 布局 和 回流 活动 ， 包 括 CSS、HTML 


30.7ms 园 泻 染 < 一 变化 ,以 及 JavaScript 对 CSS 的 修改 


27ms 轩 绘制 


112.2 ms 国 其 他 Ss 将 Web 页 面 绘制 和 光栅 化 到 屏幕 上 
104.1 ms ”闲置 3 
ee Chrome 不 能 细 分 的 活动 


图 2-17 Performance 面板 记录 的 会 话 活 动 细 分 


Mir 


缩小 范围 
Performance 面板 最 初 填充 数据 时 ， 会 自动 选择 时 间 范 围 。 如 果 想 调整 范围 ， 可 以 使 用 鼠 
标 滚轮 来 收缩 或 展开 ， 或 者 在 活动 概述 面板 中 单 击 并 拖 动 其 边缘 ， 如 图 2-16 所 示 。 调 整 范围 
时 你 会 注意 到 火焰 图 和 摘要 也 随 之 变化 ， 以 反映 选 定 的 活动 部 分 


摘要 报告 在 每 类 事件 中 花费 的 CPU 时 间 。 在 本 例 中 ， 你 会 注意 到 ， 大 部 分 时 间 花 在 脚本 和 
其 他 活动 上 。 其 他 类 别 与 我 们 讨论 的 4 种 事件 类 型 不 同 ， 它 由 Chrome 无 法 分 解 并 出 现在 火焰 图 


中 的 CPU 活动 组 成 。 


保持 选项 卡 可 见 
Web 浏览 器 善于 分 配 CPU 时 间 。 如 果 在 当前 不 可 见 的 浏览 器 选项 卡 中 运行 Performance 
面板 ， 浏 览 器 将 不 会 花费 时 间 泻 染 或 绘制 页 面 。 因 此 ， 请 确保 要 分 析 的 页 面 选 项 卡 处 于 当前 


可 见 的 状态 ! 


现在 关注 火焰 图 本 身 。 火 焰 图 用 来 表示 计算 机 程序 中 发 生 的 事件 。 在 Chrome 的 Performance 
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面板 中 , 它 将 这 些 数据 排列 在 一 个 调用 栈 中 。 对 火焰 图 来 说 ， 调 用 栈 是 记录 的 页 面 活动 的 分 层 表 
示 。 图 2-18 显示 了 客户 网 站 的 HTML 解析 以 及 源 自 HTML 的 活动 的 调用 栈 。 


HTML 解 析 事 件 DOM 吕 绪 事件 关联 的 脚本 活动 
Parse HTML (localhost/ [2...]) | / 
Event (DOMContentLoaded) | Evaluate Scr...tload.js:1) | 
Function Call jquery.min.js:20) a 
[EN | 国 | 围 | 国生 中 
~ ~ 一 
演 染 事件 


图 2-18 ”Performance 火焰 图 视图 中 的 独立 调用 栈 。 顶 端的 事件 是 解析 HTML 的 加 载 事 
件 ， 下 面 是 源 于 它 的 事件 ,例如 当 DOM 准备 好 时 触发 的 domcontentloaded 
事件 ， 以 及 脚本 和 演 染 事件 


当 你 在 火焰 图 中 找到 一 个 想 要 深入 的 调用 栈 时 ， 可 以 通过 点 击 它 的 层 与 之 交互 。 点 击 层 时 ， 
Performance 面板 底部 的 摘要 视图 将 会 更 新 所 选 事件 的 特定 信息 。 图 2-19 显示 了 与 浏览 器 评估 的 
behaviors.js 网 站 脚本 相关 的 信息 。 


Summary Bottom-Up Call Tree EventLog 


Ee 件 关 型 

a Evaluate Script 
、 多 0.20ms 
计时 信息 一 一 《| Se oom 


t behaviors,is:l 


Aggregated Time 


0.2ms 国 Scripting (self} 
1.2ms 国 Scripting tchildren} 


活动 饼 图 一” 


及 其 分 解 


Total: 1.39 ms 


图 2-19 脚本 事件 的 分 解 。 可 以 看 到 与 事件 相关 的 信息 ， 例 如 使 用 的 CPU 时 间 、 事 件 
类 型 及 其 来 源 。 此 数据 还 通过 人 饼 图 进行 可 视 化 显示 


有 了 这 些 信息 , 我 们 就 可 以 看 到 浏览 器 在 调用 栈 的 这 个 特定 部 分 中 的 工作 。 虽然 这 有 助 于 熟 
悉 浏 览 器 在 底层 的 工作 方式 ， 但 它 并 没有 展示 如 何 识别 页 面 上 的 性 能 问题 。 下 一 节 将 给 出 
Performance 面板 在 页 面 缓慢 运行 时 提供 的 一 些 线索 。 


2.4.3 ”识别 问题 事件 : jank 是 元 凶 


确定 性 能 问题 之 前 ,必须 定义 页 面 性 能 的 主要 目标 。 目 标 很 简单 : 最 小 化 浏览 器 加 载 和 浑 染 
页 面 的 时 间 。 要 做 到 这 一 点 ， 必 须 击 败 唯 一 的 敌人 : jank。 
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jank 是 指 交 互 和 动画 效果 卡 顿 , 或 未 能 顺利 演 染 。 如 果 使 用 的 编程 搁 术 欠 佳 , 那么 即使 是 从 
网 络 快速 加 载 的 页 面 ， 也 会 受到 jank 的 影响 。 

那么 ， 是 什么 导致 了 jank” 当 单一 的 帧 中 占用 了 太 多 CPU 时 间 ， 就 会 发 生 这 种 情况 。 帧 是 
浏览 需 在 每 秒 显示 时 间 内 所 做 的 工作 量 。 这 里 的 工作 指 的 是 前 面 描述 的 事件 ， 例 如 加 载 、 脚 本 执 
行 、 绘 制 和 演 染 。 

如 果 许 多 帧 中 出 现 一 个 jank 帧 ， 并 不 会 造成 太 大 的 麻烦 ， 但 当 帧 堆积 起 来 时 ， 帧 速率 就 会 
下 降 。 这 可 能 是 由 于 脚本 触发 太 频 繁 、 加 载 事件 花费 的 时 间 太 长 ， 以 及 任何 其 他 导致 泻 染 和 绘制 
操作 效率 低下 的 活动 造成 的 。 


发 现 jank 
如 果 你 不 确定 jank 是 什么 样子 的 ， 就 很 难 发 现 它 。 打 印 页 的 性 质 也 不 允许 对 动作 进行 有 
意义 的 视觉 表示 。 好 在 Google 开发 人 员 Jake Archibald 开发 了 一 款 实用 的 游戏 Jank Invaders， 
可 以 帮助 你 训练 肉眼 识别 jank。 


典型 显示 的 最 佳 帧 速率 为 每 秒 60 帧 ， 但 并 非 所 有 设备 都 能 实现 ， 这 取决 于 设备 的 硬件 功能 
和 页 面 的 复杂 性 。 可 以 把 这 个 数字 视 作 目标 ， 但 要 知道 ， 不 是 每 个 设备 都 能 实现 这 个 目标 。 

大 多 数 开发 者 工具 会 测量 帧 速率 , 但 每 个 浏览 器 的 表示 方式 不 同 。 在 某 些 浏览 器 中, 帧 速率 
显示 为 一 个 图 ( 如 Chrome 中 Performance 面板 顶部 的 活动 概述 )， 但 其 他 浏览 器 可 能 只 将 其 表示 
为 一 个 没有 视觉 效果 的 数字 。 

Performance 面板 以 毫秒 为 单位 进行 测量 。 由 于 一 秒 钟 内 有 60 帧 和 1000 毫秒 ， 因 此 可 以 简 
单 计算 出 每 帧 有 16.66 毫秒 的 预算 。 因 为 浏览 器 在 每 帧 中 都 有 开销 ， 所 以 Google 建议 每 帧 有 10 
毫秒 的 预算 。 

开始 搜索 jank 之 前 ， 先 要 在 第 1 章 中 的 客户 网 站 上 找到 离开 的 地 方 。 可 以 从 GitHub 下 载 新 
的 起 点 ， 而 不 是 继续 使 用 第 1 章 的 代码 库 。 在 所 选 文件 夹 中 键入 以 下 命令 : 

git clone https://github.com/webopt/ch2-jank.git 

cd ch2-jank 


npm install 
node http.js 


然后 导航 到 http:/localhost:8080 并 记录 新 会 话 。 记录 会 话 时 , 单 击 页 面 上 的 Schedule Appointment 
按钮 打开 预约 模 态 框 。 模 态 框 滑 入 视图 后 , 停止 录制 。 Performance 面板 填充 的 内 容 应 该 如 图 2-20 
所 示 。 
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问题 帧 jank 帧 
500 ms 600 ms 700 ms 800 ms 900 ms 1000 ms 1100 ms 
Esl 1 
二 二 二 旋 斋 A asaAs=hAAaAAAbAAmAAaLAL A ALAD 
650 ms vy 700ms 750ms 800 ms 850 ms 900ms 950 ms 
223.6ms 
Ri. 
_M... 


图 2-20 ”客户 网 站 上 打开 的 模 态 框 的 时 间 线 记录 。 活 动 概述 中 的 一 系列 jank 帧 用 红色 


标记 表示 ， 在 火焰 图 中 以 红色 突出 显示 并 可 点 击 


停止 录制 后 ， 你 可 能 会 在 活动 概述 中 看 到 一 系列 红色 帧 ( 取决 于 你 的 机 带 的 处 理 能 力 )， 并 
且 这 些 特定 的 帧 在 火焰 图 中 以 红色 标记 。 如 果 你 认为 这 是 件 坏事 , 那么 你 的 直觉 是 对 的 。 当 在 活 
动 概 述 或 火焰 图 上 看 到 红色 时 ， 它 就 是 低 帧 速率 的 一 个 指 征 ， 这 是 jank 的 前 兆 。 在 火焰 图 中 ， 
可 以 单 击 你 看 到 的 任何 问题 帧 ， 页 面 底部 的 摘要 将 更 新 为 关于 jank 的 警告 ， 如 图 2-21 所 示 。 


Summary Bottom-Up Call Tree Event Log 


jank 警 告 SR Frame 
帧 / 秒 Duration 288.99 ms (at 1.46 s). Long frame times are an indication of jank. 
DT = 3 


C le 45.24 ms 
处 理 时 间 一 一 


尖 询 


图 2-21 jank 帧 的 摘要 视图 

在 这 种 情况 下 , 该 帧 的 平均 速率 仅 为 3。 当然, 这 需要 解决 , 但 如 何 才 能 找 出 问题 的 根源 呢 ? 
我 们 知道 模 态 是 使 用 动画 滑 人 位 置 的 , 所 以 这 也 许 和 它 有 关 。 要 深入 了 解 更 多 信息 ,可 以 单 击 图 
2-21 所 示 的 Event Log 选项 卡 。 点 击 事件 日 志 时 ， 将 看 到 与 帧 相关 的 每 个 事件 ， 如 图 2-22 所 示 。 


持续 时 间 事件 
文本 筛选 筛选 筛选 


Call Tree Event Log 


All oading 品 scripting 轩 Rendering paining > 


Start Time 生 Self Time Total Time Bcrivity 
1140.5 ms 0.1 ms 0.4ms| 转 Timer Fired guery.min.js:364 
1154.2 ms 0.1 ms 0.1ms | Timer Fired jguery.min.js:364 
1167.7 ms 0.0ms 02ms|e 轩 TimerFired iguery.min.js:364 
1180.3 ms 0.1 ms 0.4ms|e 轩 Timer Fired iguery.min-is:364 
1193.0ms 0.0ms 0.3ms|e 轩 Timer Fired jguery.min.js:364 


图 2-22” 按 脚本 事件 筛选 的 事件 日 志 。 文 本 框 可 用 于 按 活动 的 内 容 筛 选 事件 、 按 “持续 
时 间 ” 下 拉 列 表 中 的 特定 时 间 长 度 筛选 事 件 ， 或 按 事件 类 型 租 选 事件 
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转 到 事件 日 志 时 ， 你 会 看 到 一 个 或 许多 标记 为 Timer Fired 的 事件 。 每 当 记录 setTimeout 
或 set Interval 调用 时 , 都 会 记录 一 个 TimerFired 标签 。 因 为 模 态 滑 人 时 , 你 会 看 到 这 些 事件 ， 
所 以 这 可 能 是 jQuery animate 困 数 造成 的 。 在 确定 事件 的 确切 起 始点 时 ，Performance 面板 有 时 
可 能 有 点 难以 理解 ,但 你 知道 预约 日 程 安排 模 态 框 元 素 绑 定 了 一 个 click 事件 , 它 调用 animate 
使 模 态 框 可 见 。 在 文本 编辑 器 的 js 文件 夹 中 打开 behaviors.js， 并 查找 对 animate 方法 的 调用 。 
你 应 该 在 第 10 行 看 到 对 这 个 方法 的 单个 调用 ， 它 看 起 来 如 下 所 示 : 

$(".modal") .animate({ 


"top": topPlacement 
Fy 00. 


为 属性 设置 动画 时 ，animate 会 调用 一 个 计时 器 ， 而 正 是 这 个 计时 器 导致 了 一 个 相当 小 的 
jank。 所 以 你 需要 思考 ， 还 能 用 什么 让 这 个 工作 更 流畅 一 点 。 因 为 这 是 一 个 简单 的 线性 动画 ， 模 
态 框 是 从 顶部 滑 入 的 ， 所 以 当 CSS 过 渡 内 置 到 浏览 器 中 时 ,使 用 jQuery 来 添加 动画 似乎 有 点 遇 
春 。CSS 过 渡 是 CSS 的 一 项 原生 技术 ， 非 常 适合 线性 动画 。 因 为 它们 内 置 在 浏览 器 中 ， 所 以 也 
没有 jQuery 的 开销 ， 并 且 可 以 比 使 用 setTimeout 和 setInterval 的 基于 计时 器 的 动画 ( 如 
jQuery 的 animate 方法 ) 执行 得 更 好 。 

如 果 你 对 CSS 过 渡 一 无 所 知 ， 请 不 要 担心 ， 第 3 章 会 详细 介绍 。 


想 要 跳 过 ? 
如 果 你 感到 困惑 或 者 想 提 前 跳 到 CSS 过 渡 ， 可 以 输入 git checkout -f css transitionon， 
完整 代码 将 会 下 载 到 你 的 计算 机 上 。 如 果 有 任何 更 改 要 保留 ， 请 确保 已 备份 了 你 的 工作 。 


简 言 之 , 利用 CSS transition 属性 可 以 在 一 段 时 间 内 动态 更 改 CSS 属性 (例如 color 和 
width )。 要 修复 jank, 可 以 使 用 CSS 过 渡 将 模 态 框 滑 入 视图 ， 而 不 是 使 用 animate 方法 。 要 做 
到 这 一 点 ， 可 以 使 用 一 个 CSS 类 ， 在 添加 或 删除 模 态 框 时 ， 为 其 位 置 设 置 动画 。 

首先 在 文本 编辑 器 中 打开 styles.css， 转 到 第 557 行 ， 这 是 用 于 桌面 设备 模 态 样式 的 CSS 规 
则 。 在 此 规则 中 ， 执 行 以 下 操作 。 

(1) 修改 top 属性, 将 top: -1508; 改 为 : 

transform: translateY (L150%); 

(CO) 在 下 一 行 添加 这 个 属性 : 

transition: transform .5s; 

(3) 在 刚 修改 的 CSS 规则 后 面 ， 添 加 新 的 CSS 规则 : 


div.modal .opent{ 
transform: translateY (10%); 


} 


(4) 在 第 1040 行 附近 的 移动 设备 的 样式 断 点 内 , 需要 添加 为 移动 设备 设置 样式 的 相同 规则 的 
版 本 : 


36 第 2 章 使 用 评估 工具 


Qiv.modqal .opent 
transform: translateY(0); 


} 


回顾 上 述 步 又: 我 们 没有 再 使 用 top 属性 定位 元 素 ， 而 是 将 translateY 方法 应 用 到 
transform 属性 上 。 此 transfornm 方法 与 top 属性 一 样 ， 将 元 素 重 新 定位 到 立轴 ， 但 不 同 之 
处 在 于 它 的 动画 效果 更 好 ，jank 也 更 少 ， 这 也 正 是 我 们 所 追求 的 。 

接 下 来 添加 transition 属性 ， 该 属性 用 于 元 素 的 transform 属性 。transform 属性 中 
的 更 改 将 以 半 秒 的 持续 时 间 设 置 动画 。 最 重要 的 是 ， 对 transform 属性 的 更 改 限 制 在 一 个 名 为 
open 的 单独 类 中 。 当 在 div.modal 元 素 上 切换 这 个 类 时 ， 模 态 框 的 位 置 将 进行 动画 处 理 ， 从 
而 达到 在 添加 类 时 进入 视窗 ， 移 除 类 时 退出 视窗 。 

剩 下 的 工作 就 是 更 新 JavaScript， 在 模 态 框 打 开 和 关闭 时 添加 和 删除 这 个 类 。 这 涉及 在 
behaviors.js 中 更 改 两 段 JavaScript。 

(1) 在 openModal 也 数 中 ,会 看 到 以 下 对 animate 函数 的 调用 : 


$s(".modal") .animatel(t 
"top": topPlacement 
} 00) 


(2) 这 就 是 要 修复 的 jank 的 animate 调用 。 将 其 替换 为 : 将 open 类 添加 到 div .modal 元 
素 ， 这 将 导致 transition 属性 启动 并 将 模 态 框 滑 入 视图 : 

s(".modal") .addClass ("open");} 

(3) 更 新 closeModal 函数 ， 从 元 素 中 移 除 open 类 ， 以 便 在 用 户 消除 模 态 框 时 ， 将 效果 反 
转 。 为 此 ， 请 将 下 面 的 代码 


$s(".modal") .hide(0, function(){ 
$s(".modal") .removeAttr("style"); 
3} 


替换 为 下 面 这 行 代码 ; 
$s(".modal") .removeClass ("open"); 


接 下 来 进行 测试 ， 以 确保 模 态 框 仍然 可 用 。 然 后 在 Performance 面板 中 重新 测试 ， 以 查看 新 
代码 的 执行 情况 。 结 果 应 该 如 图 2-23 所 示 。 
更 短 的 问题 由 更 少 的 jank 帧 


500ms 600ms 700 ms 800 ms 900 ms 
用 T 
a~AAAa A 让 AaAAAA 
600ms + 650 ms 700 ms 750 ms 
98.8 ms 


图 2-23 ”实现 了 CSS 过 渡 后 的 模 态 框 动画 性 能 。jank 帧 仍然 存在 ， 
但 比 以 前 少 了 很 多 ， 整 体 体 验 得 到 改善 
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jank 帧 是 否 仍 存在 于 动画 中 ? 没 错 ， 但 是 减少 了 ， 而 且 动 画 也 得 到 了 全 面 的 改进 。 此 外 ， 活 
动 摘 要 显示 CPU 使 用 率 降 低 了 。 图 2-24 显示 了 jQuery 动画 和 CSS 过 渡 的 CPU 使 用 情况 。 


范围 : 1.76~2.41s 范围 : 2.45~3.10s 
, 0.0 ms 国 加 载 中 0.0 ms 国 加 载 中 
p 37.9 ms 目 执行 脚本 | 9.4 ms 国 执行 脚本 
25.8 ms 国 演 染 14.4 ms 国 尝 染 
19.2 ms 国 绘制 8.7 ms 国 绘 制 
28.6 ms 国 其 他 18.0 ms 国 其 他 
542.5 ms 口 闲置 605.0 ms 口 闲置 
合计 : 654.05 ms 合计 : 655.53 ms 
jQuery 动画 CSS 过 渡 


图 2-24 jQuery 动画 ( 左 ) 与 CSS 过渡 ( 右 ) 的 CPU 使 用 摘要 


将 jQuery 动画 转换 为 简单 的 CSS 过 渡 ， 不 仅 解 决 了 模 态 框 的 动画 拌 动 问题 ， 而 且 在 转换 过 
程 中 节省 了 CPU 时间。 

CSS 过 渡 是 否 总 是 动画 需求 的 解决 方案 ? 非 也 。 有 时 你 的 需求 不 是 CSS 过 渡 所 能 满足 的 ， 
但 是 CSS 过 渡 是 线性 转换 的 一 个 很 好 的 解决 方案 。 因 为 它们 是 CSS 的 一 部 分 ， 所 以 不 会 产生 额 
外 的 开销 。 第 3 章 会 更 详细 地 介绍 CSS 转换 。 下 面 继续 学 习 如 何 使 用 JavaScript 在 时 间 线 中 标记 
特定 点 。 


2.4.4 用 JavaScript 在 时 间 线 中 标记 点 


在 有 大 量 活动 的 网 站 上 ， 用 Performance 面板 很 难 找到 想 要 的 东西 。 如 果 一 个 站 点 没有 太 多 
活动 ,就 比较 容易 找到 特定 的 事件 。 但 如 果 正 在 发 生 一 系列 的 活动 ,要 找到 你 想 要 的 东西 可 能 就 
不 那么 容易 了 。 

值得 庆幸 的 是 ,， Chrome 的 开发 者 工具 允许 通过 JavaScript 标记 时 间 线 的 某 些 部 分 。 这 可 以 通 
过 console 对 象 的 timeStamp 方法 实现 ， 该 方法 接受 一 个 参数 ， 即 在 时 间 线 上 放置 标记 的 字 
符 串 。 它 类 似 于 高 速 公路 上 的 里 程 标志 。 可 以 在 控制 台 或 网 站 的 JavaScript 中 调用 此 方法 。 

要 尝试 这 个 方法 ， 请 打开 练习 的 js 文件 夹 中 的 behaviors.js， 转 到 第 33 行 。 该 行 应 包含 一 个 
jQuery click 事件 绑 定 ， 负 责 打 开 调 度 模 态 框 : 

$("#schedule") .click (function(){ 

在 该 事件 处 理 程序 的 函数 内 部 ， 添 加 以 下 代码 : 

console.timeStamp ("Modal open."); 


记录 新 会 话 时 ,该 方法 将 在 启动 调度 模 态 框 时 ,在 时 间 线 上 放置 一 个 标记 。 停止 录制 并 选择 
整个 录制 范围 时 ， 火 焰 图 上 方 会 出 现 一 个 黄色 标记 ， 如 图 2-25 所 示 。 


ti 
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关联 调用 栈 。 时 间 蕉 标记 


450ms 500ms 550ms 600ms 
87.2 ms 
ee 
了 Interactions Response Animatil 
Y Input | Mouse Up 


Summary Bottom-Up CallTree EventLog 


All +| 国 Loading 同 Scripting 国 Rendering 国 Painting 


Start Time v Self Time Total Time Activity 
583.3ms 0.0 ms 0.0 ms Event 
573.4 ms 0.5 ms 9.9ms | 了 做 Event 
583.2 ms 0.0 ms 0.1ms > Evaluate Script 
574.5ms 8.6ms 8.6ms | v 装 Function Call 


nS TS 国 Timestamp: Modal open. 


关联 事件 
图 2-25 “在 时 间 线 上 添加 的 标记 。 选 择 关联 的 调用 栈 时 ， 事 件 日 志 中 会 显示 时 间 蕉 事 
件 调用 


在 调用 栈 中 这 个 标记 的 附近 挖掘, 可 以 在 栈 中 找到 相应 的 层 , 并 在 事件 日 志 中 找到 标记 事件 。 
通过 标记 ， 可 以 将 要 查找 的 内 容 缩小 到 特定 的 时 间 范 围 ， 而 不 必 费 力 地 浏览 整个 数据 集 。 
接 下 来 快速 浏览 其 他 浏览 器 中 的 泻 染 分 析 器 ， 并 将 它们 与 Chrome 自身 的 分 析 器 进行 比较 。 


2.4.5 ”其 他 浏览 器 中 的 演 染 分 析 器 


其 他 浏览 器 和 Chrome 一 样 ， 也 有 自己 的 时 间 线 工具 。 它 们 的 使 用 方式 通常 是 相同 的 : 重 
新 加 载 页 面 ， 或 按 组 合 键 ( Windows: CtrlI+E; Mac: Cmd+E ) 开始 录制 会 话 ， 再 按 一 次 以 停 
止 录 制 。 

Firefox 的 工具 是 类 似 的 , 使 用 方式 也 是 一 样 的 。 时 间 线 概述 显示 了 应 用 的 帧 速率 ,以 及 有 用 
的 统计 信息 ， 如 会 话 的 最 小 、 最 大 和 平均 帧 速率 。 除 了 火焰 图 外 , 会话 数据 还 可 以 以 瀑布 图 方式 
查看 。 

Edge 的 分 析 工 具 与 Chrome 和 Firefox 相似 ， 但 处 于 设计 良好 的 用 户 界面 中 ， 它 的 特性 更 为 
独特 ， 如 图 2-26 所 示 。 和 Firefox 一 样 ， 它 也 位 于 Performance 选项 卡 下 ， 并 且 有 显示 帧 速率 的 
时 间 线 概述 。 主要 的 区 别 是 Edge 将 性 能 分 成 若干 段 , 这 将 显示 CPU 在 每 个 演 染 帧 中 所 做 的 操作 。 
Chrome 和 Firefox 没有 使 用 这 种 方法 ， 是 为 了 更 流畅 地 表示 数据 。 
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CPU 的 利用 帧 事件 类 型 


DOM Explorer Console | Debugger 
bp EN 
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Network (? 


Memory Emulation / Experiments 
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Moading 国 Scripting 加 GC 凰 Stying Rendering Image decoding 
100 
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$ 要 | 伸 
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100 


4 Visual throughput (FPS) Frames per second 
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Timeline ， Javascript call stacks 4 Sort by: Starttime ~ |[T Fiterevents| 
Event name 赴 Po 最 I 
b Timer 1 0.9 ms (0.56 ms) Selection duration: 12.54s 
PTimer 1 5.84 ms (0.56 ms) SEE 0s 
b Paint 1 17.29 ms (5.67 ms) 
Garbage collection 24.13 ms Ul thread summary: 
HTML parsing 12.21 ms 
b Layout 73 ms (7.19 ms) 
b HTML parsing 1 30.98 ms (2.01 ms} 则 
HTTP request tw 01.. 152.15 ms SS 
HTTP request [rw 1482 ms 4% 全 于 
HTTP request L125.69 ms 
国 326.97 ms 
oy 
国 316.6 ms 88% 
瀑布 图 帧 速率 图 活动 摘要 
; 上 全 已 > 、 
图 2-26 “Microsoft Edge 性 能 分 析 器 的 注释 概述 


一 个 好 消息 是 ， 本 章 介绍 的 所 有 浏览 器 都 支持 用 于 标记 时 间 线 的 console.timestamp 方 
法 。 因 此 ,无 论 使 用 哪 种 工具 ， 都 可 以 在 会 话 中 标记 一 个 点 ， 以 帮助 找到 要 查找 的 活动 。 接 下 来 
学 习 如 何 使 用 Chrome 中 的 console 对 象 ， 对 JavaScript 代码 片段 进行 基准 测试 。 


2.5 在 Chrome 中 对 JavaScript 进行 基准 测试 


JavaScript 基准 测试 能 够 比较 问题 的 不 同 解决 方法 ， 并 梳理 出 哪 种 方法 性 能 最 好 。 通 过 选择 
性 能 最 佳 的 解决 方案 ， 你 将 创建 泻 染 速度 更 快 、 对 用 户 输入 的 响应 速度 也 更 快 的 页 面 。 

大 多 数 浏览 器 中 的 console 对 象 让 你 能 够 使 用 time 和 timeEnda 方 法 对 代码 进行 基准 测试 。 
这 些 方法 接受 一 个 用 于 标记 基准 会 话 的 字符 串 ， 类 似 于 timestamp 方法 。 为 了 演示 如 何 使 用 此 
功能 , 需要 打开 前 面 的 jank 练习 , 并 在 Chrome 开发 者 工具 的 控制 台中 进行 操作 。 要 访问 控制 台 ， 
请 点 击 Console 选项 卡 。 

time 和 timeEng 的 典型 用 例 是 比较 两 段 代码 的 执行 时 间 。 本 例 中 将 比较 jQuery 选择 DOM 
元 素 的 速度 与 JavaScript 原生 的 document .querySelector 方法 的 速度 。 

重新 打开 之 前 的 jank 练习 ， 并 在 控制 台中 批量 运行 以 下 两 个 命令 : 
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1 console.time("jQuery"); jQuery ("#schedule"); console.timeEnd("jQuery"); 
2 console.time("gquerySelector"); document .querySelector("#schedule"); 
console.timeEnd ("querySelector"); 


注意 ， 对 于 每 个 测试 ， 发 送 到 time 和 timeEna 方法 的 字符 串 参 数 是 相同 的 。 输 入 的 字符 
串 是 会 话 的 标记 。 对 于 要 终止 的 基准 测试 ， 在 time 方法 中 使 用 的 字符 串 标记 必须 与 timeEng 
方法 中 使 用 的 标记 相同 。 运 行 这 两 个 基准 测试 时 ， 控 制 台 输出 应 该 如 图 2-27 所 示 。 


民 口 Elements Layers Console Sources Network Timeline Profiles Resources Audits 
© <topframe> 了 Preserve log 
> console.time("jQuery"); jQuery("#schedule"); console.timeEnd("jQuery"); 
jQuery: 0.323ms 
undefined 
> console.time("querySelector"); document,.querySelector("#schedule"); console,.timeEnd("querySelector"); 


querySelector: 0.0669ms 
undefined 


图 2-27 运行 jQuery 的 DOM 选择 器 与 原生 document .querySelector 方法 的 两 个 
基准 测试 的 结果 。 图 中 已 经 圈 出 结果 


如 你 所 见 》 基准 测试 结果 已 经 显示 在 控制 台 中 。 在 本 例 中 可 以 看 到 , document .querySelector 


方法 比 jQuery 自己 的 CSS 选择 需 引 擎 更 快 。 这 并 不 奇怪 , 因为 原生 的 JavaScript 方 法 通常 比 用 户 
定义 的 方法 更 快 。 


基准 测试 提示 
进行 基准 测试 时 ， 要 知道 单个 测试 结果 是 不 够 的 。 应 该 运行 多 个 会 话 并 对 结果 取 平 均 ， 以 
尽 可 能 保证 准确 性 。 


控制 台中 的 基准 测试 适用 于 小 型 测试 ， 但 是 有 更 大 的 代码 块 需要 评估 时 ， 这 就 不 切实 际 了 。 
要 解决 这 个 问题 , 请 在 应 用 的 JavaScript 中 使 用 time 和 timeEnd 方法 , 在 代码 执行 时 输出 将 显 
示 在 控制 人 台中。 同样 值得 注意 的 是 , 这 种 方法 在 本 章 介绍 的 4 种 浏览 器 中 都 可 用 ,并 且 不 管 在 哪 
个 平台 上 ， 使 用 方式 都 是 相同 的 。 

接 下 来 将 学 习 如 何 使 用 Chrome 的 Device Mode (设备 模式 ) 模拟 各 种 设备 ( 如 平板 计算 机 
和 手机 ) 上 网 站 的 外 观 ， 以 及 如 何 检查 物理 设备 上 的 页 面 并 监控 其 行为 。 


2.6 ”模拟 和 监控 设备 


作为 一 名 开发 人 员 , 你 通常 需要 花费 大 量 时 间 在 桌面 环境 中 对 网 站 进行 初始 测试 。 但 你 还 应 
该 使 用 工具 进行 进一步 的 测试 , 这 些 工 具 可 以 模拟 页 面 在 移动 设备 上 的 外 观 , 以 及 在 实际 物理 设 
备 上 的 外 观 。 这 种 测试 可 以 涵盖 跨 CSS 断 点 的 粗略 样式 检查 ， 以 及 在 真实 设备 上 进行 的 性 能 测 
试 。 本 节 将 学 习 如 何 同时 执行 这 两 项 操作 。 
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2.6.1 在 桌面 Web 浏 览 器 中 模拟 设备 


检查 网 站 外 观 的 最 简单 方法 是 在 桌面 Web 浏览 器 上 使 用 设备 模拟 工具 
设备 分 辨 率 和 像素 密度 等 高 层 特征 。 


在 Chrome 中 使 用 设备 模式 很 容易 。 要 想 试用 ， 可 以 跳 转 到 一 个 网 站 ， 


LL。 这 些 工 具 仅 涵盖 了 


本 例 使 用 Manning 出 


版 社 网 站 。 打 开 开 发 者 工具 后 ， 按 Ctrl+Shift+M 组 合 键 (在 Mac 上 为 Cmd+Shift+M ), 或 者 单 击 
Elements 选项 卡 左 侧 的 移动 设备 图 标 。 随 后 界面 会 发 生变 化 ， 如 图 2-28 所 示 。 


设备 设备 像 
视 口 ” 预 设 宽度” 高度” 比例 素 比 菜单 


SS 


Responsive ¥ 320 X 480 50%v DPR: 1.0 : 


© DotD: Get half off CoreOS in Action -usecodedotd032 


属 罩 ww pusu dE 7 三 


图 2-28 在 Chrome 中 使 用 设备 模拟 模式 查看 Manning 出 版 社 网 站 


在 此 界面 中 , 可 以 从 预 设 下 拉 列 表 选 择 设备 配置 ， 并 模拟 当前 页 面 中 所 选 预 设 的 特征 。 如 图 
2-28 所 示 ， 可 以 进行 几 方面 的 调整 : 切换 到 屏蔽 的 设备 配置 (例如 让 hone 或 Galaxy Nexus )、 输 
和信 自 定义 分 辨 率 、 更 改 设备 像素 比 以 调试 与 高 密度 显示 需 相 关 的 问题 ， 等 等 。 


其 他 Web 浏览 器 也 有 类 似 的 实用 工具 。Safari 有 一 个 以 iOS 为 中 心 的 


设备 模拟 实用 工具 , 称 


为 Responsive Design Mode ( 响应 式 设计 模式 )。 可 以 通过 点 击 开发 者 菜单 中 的 Enter Responsive 


Design Mode， 或 者 按 AlttrCmd+R 调用 此 模式 。 该 实用 程序 与 Chrome ; 


处 ， 它 专注 于 模拟 以 微软 为 中 心 的 移动 设备 和 Internet Explorer。 


类 似 , 但 具有 不 同 的 用 户 


界面 。Firefox 的 Responsive Design Mode 与 Chrome 类 似 , 但 总 体 上 选项 较 少 。Edge 也 有 类 似 之 


尽管 在 桌面 浏览 器 中 模拟 设备 很 有 帮助 , 但 不 要 忘记 在 移动 设备 上 进行 测试 , 以 发 现 基于 浏 
览 器 的 工具 可 能 遗漏 的 问题 。 接 下 来 ,我 们 将 学 习 如 何在 桌面 版 的 Chrome 中 连接 Android 设备 ， 


六 


监控 其 活动 。 
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2.6.2 在 Android 设 备 上 远程 调试 网 站 


有 时 候 , 我 们 需要 在 真实 设备 上 测试 自己 的 网 站 。 基于 浏览 器 的 工具 ( 如 前 一 节 介 绍 的 工具 ) 
对 于 调试 和 性 能 分 析 非 常 有 用 , 但 是 桌面 设备 比 移动 设备 有 更 多 的 内 存 和 更 强 的 处 理 能 力 。 因 此 ， 
进行 实际 的 测试 也 很 重要 ， 这 样 可 以 验证 这 些 平 台 上 是 否 存 在 性 能 问题 。 

要 实现 这 一 点 , 只 需 将 移动 设备 连接 到 桌面 计算 机 , 并 使 用 其 中 一 个 浏览 器 中 的 开发 者 工具 
对 其 进行 调试 。 具 体 实现 方式 取决 于 你 的 设备 。 对 于 Android 设备 ， 可 以 使 用 Chrome。 

Chrome 把 这 个 功能 称 为 远程 调试 (remote debugging )。 要 使 用 它 , 请 使 用 USB 线 将 Android 
设备 连接 到 计算 机 ， 并 在 移动 和 桌面 设备 上 打开 Chrome。 遵 循 这 些 指示 后 ， 你 的 Android 设备 
将 显示 在 桌面 设备 的 Chrome 远程 调试 器 的 设备 列表 中 ， 如 图 2-29 所 示 。 


Devices 


Discover USB devices Port forwarding... 


SPH-L720 #50A26A92 


Chrome (46.0.2490.76) tab with u Open 


Jeremy Wagner | Web Developer hitp://jeremywagner.me/ 
inspect focustab reload close 


图 2-29 Chrome 设备 列表 ， 显 示 连 接 的 Android 手机 上 打开 的 网 页 

开始 远程 调试 前 ， 需 完成 以 下 步骤 。 

(1) 在 Android 设备 上 启用 开发 者 选项 一 一 需要 选择 Settings>About Device， 并 轻 触 build 
number 字段 7 次 (不 是 在 开玩笑 )。 

(2) 启用 USB 调试 一 一 在 Android 设备 上 ,选择 Settings> Developer Options， 然 后 选中 USB 
Debugging 复 选 框 。 

(3) 允许 设备 授权 一 一 在 桌面 设备 的 Chrome 中 , 把 URL 转 到 chrome://inspect#devices， 并 确 
保 选 中 Discover USB Devices 复 选 框 。 这 使 你 能 够 在 连接 的 设备 上 接收 到 Chrome 内 部 的 授权 请 
求 。 然 后 点 击 OK 确认 。 

(4) 检查 设备 上 打开 的 网 页 一 一 如 图 2-29 所 示 ， 设 备 出 现在 列表 中 后 ， 单 击 列表 中 设备 下 面 
的 Pnspect 链接 。 

经 过 这 些 宛 长 的 步骤 之 后 , 开发 者 工具 将 在 台式 机 上 启动 。 弹 出 的 窗口 与 经 常 看 到 的 工具 相 
同 ， 只 是 左 侧 的 窗 格 中 显示 的 是 设备 的 屏幕 镜像 ， 如 图 2-30 所 示 。 
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镜像 屏幕 用 于 连接 设备 的 开发 者 工具 
©@ee Developer T 
€ © | mannin g.com/ 展 Elements 。 Lay Console st ces 。 Security Audits 
eo 于 Eee | Capt 
AI ting 
© OotD: Get hel of Front End Teoime wh Gu owe. ord Yel 
~ P 
Newin 978ms| |7557im | 


1 用 Cf 137 站 
WINDOWS WE 
IN A MONTH OF LUNCHES. 一 


/ | 


Range 0 -3.728 


Aggregated Time 


图 2-30 Android 手机 上 的 开发 者 工具 ,分析 了 某 个 页 面 的 演 染 活动 。 在 这 个 视图 中 ， 
设备 显示 的 内 容 被 镜像 投射 到 主机 上 ,开发 者 工具 分 析 的 是 设备 的 当前 页 面 ， 
而 不 是 桌面 浏览 器 上 的 活动 会 话 
当 远 程 调试 会 话 处 于 活动 状态 时 , 可 以 在 桌面 会 话 上 执行 通常 使 用 开发 者 工具 执行 的 任何 操 
作 ， 但 现在 这 些 工具 的 上 下 文 是 Android 手机 上 的 会 话 上 下 文 。 


小 提示 
当 你 的 Android 设备 已 连接 ,并且 开发 者 工具 在 主机 设备 上 打开 时 , 请 尝试 对 移动 网 络 连 
接 的 加 载 时 间 进 行 基准 测试 ， 或 使 用 Performance 面板 查看 设备 的 性 能 等 。 现 在 你 可 以 在 连续 
的 设备 上 做 这 些 事情 了 ， 操 作 方 式 和 本 章 针 对 Chrome 介绍 的 方式 是 一 样 的 。 


接 下 来 ,我 们 将 学 习 如 何 通过 在 Mac 上 使 用 Safari， 同 时 在 10S 设备 上 使 用 Mobile Safari 来 
调试 移动 设备 。 
2.6.3 在 iOS 设 备 上 远程 调试 网 站 

你 也 可 以 在 ioOg 设备 上 调试 页 面 ， 这 比 在 Android 手机 上 远程 调试 网 站 要 简单 。 首 先 使 用 
USB 线 将 iOS 设备 连接 到 Mac， 但 不 使 用 Chrome， 而 是 在 桌面 和 移动 设备 上 使 用 Safari。 在 两 
个 设备 上 都 打开 Safari 后 ， 请 在 连接 的 设备 上 访问 Manning 出 版 社 网 站 ， 然 后 执行 以 下 操作 。 

(1) 授权 Mac 访问 你 的 设备 一 一 在 Mac 上 的 Safari 中 转 到 Develop 菜单 ， 你 将 看 到 iOS 设备 
的 名 称 (例如 Jeremy 的 iPhone )。 在 该 菜单 下 面 可 以 看 到 Use for Development 选项 。 点 击 此 选项 
后 ， 你 将 在 iOS 设备 上 看 到 一 个 提示 : 是 否 信 任 它 所 连接 的 计算 机 ?点 击 Trust 选项 ， 将 允许 


Mac 与 设备 通信 。 


44 第 2 章 使 用 评估 工具 


(2) 检查 设备 上 打开 的 网 页 一 一 授权 给 Mac 之 后 ， 返 回 Develop 菜单 ， 选 择 你 的 设备 。 在 子 
菜单 中 ， 你 将 看 到 在 连接 的 设备 的 Safari 中 打开 的 网 页 列表 。 选 择 焦点 在 Manning Publications 
页 面 上 的 设备 。 

从 iOS 设备 的 网 页 列表 中 选择 后 ， 将 为 该 网 站 启用 开发 者 工具 。 与 在 Android 设备 上 使 用 
Chrome 进行 远程 调试 一 样 , 你 可 以 使 用 任何 可 用 的 工具 来 调试 桌面 设备 上 的 页 面 , 从 而 发 现 iOS 
设备 上 网 页 的 性 能 问题 。 


2.7 ”创建 自 定 义 网 络 节 流 配置 


在 第 1 章 , 我 们 在 Chrome 中 使 用 过 网 络 节 流 工具 。 该 工具 允许 模拟 某 些 互联 网 连接 , 如 3G 
或 4G 连接 。 这 对 于 在 无 法 复制 的 情况 下 确定 页 面 加 载 时 间 很 有 价值 。 

在 本 书 涉及 的 4 个 浏览 器 中 ，Chrome 是 唯一 具有 此 功能 的 浏览 器 。 因 为 第 1 章 介 绍 了 如 何 
使 用 节 流 工具 ， 所 以 我 们 将 讨论 如 何 通过 自 定义 配置 进一步 扩展 其 价值 。 

使 用 Chrome 附带 的 预 设 ， 可 以 大 致 了 解 许多 互联 网 连接 类 型 的 性 能 。 除 非 必须 测试 特定 的 
场景 ,否则 内 置 的 节 流 预 设 足以 满足 大 多 数 情况 。 它 特别 适用 于 在 本 地 计算 机 运行 的 站 点 上 进行 
生 能 测试 ， 因 为 这 些 网 站 运行 时 没有 网 络 瓶 颈 。 

如 果 确 实 需要 测试 特定 的 场景 ， 那 么 可 以 通过 Add 选项 添加 自 定义 配置 ， 如 图 2-31 所 示 。 
点 击 此 按钮 ,你 会 看 到 Network Throttling Profiles settings 屏幕 ,在 该 屏幕 上 ,可 以 点 击 Add Custom 
Profile 按钮 ， 即 可 添加 新 的 配置 。 执 行 此 操作 时 ， 会 出 现 如 图 2-32 所 示 的 屏幕 。 


一 


Custom 

点 击 以 添加 自 定义 “一 一 ”Add… 
届 流 配置 
ine 


GPRS (50 kb/s 500ms RTT) 
Regular 2G (250 kb/s 300ms RTT) 
Good 2G (450 kb/s 150ms RTT) 
Regular 3G (750 kb/s 100ms RTT) 
Good 3G (1 Mb/s 40ms RTT) 
Regular 4G (4 Mb/s 20ms RTT) 
DSL (2 Mb/s 5ms RTT) 
WiFi (30 Mb/s 2ms RTT) 
Disabled 
Y Nothrottling 


2-31 Chrome 附带 的 网 络 节 流 配置 ， 带 有 添加 自 定义 配置 的 选项 


Profile Name Download Upload Latency 

US Average 1523 1523 55 

r 7 optional optional optional 
Add Cancel 


图 2-32 ”在 Chrome 中 添加 新 的 节 流 配置 。 配 置 需要 四 点 信息 : 配置 名 、 下 载 速 度 和 
上 传 速度 ( 以 Kbits/s 为 单位 )、 以 毫秒 为 单位 的 延迟 
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屏幕 显示 如 下 区 域 。 

口 配置 名 称 一 一 配置 的 名 称 。 节 流 配 置 下 拉 列 表 中 将 显示 你 输入 的 内 容 。 
口 吞吐 量 一 一 以 千 字 节 为 单位 ， 显 示 配 置 的 连接 速度 。 

口 延迟 


以 毫秒 为 单位 ， 显 示 配 置 的 连接 延迟 。 民 
添加 配置 后 ， 它 将 在 下 拉 列 表 中 可 见 ， 如 图 2-33 所 示 。 现 在 可 以 使 用 自 定 义 配置 ， 观 察 它 会 


如 何 影 响 网 站 的 加 载 时 间 。 使 用 时 ， 请 在 站 点 加 载 时 查看 Network 选项 卡 ， 以 查看 正在 运行 的 新 
配置 。 


Custom 
Add... 


新 的 节 流 配置 一 ”prosete 

Offline 
GPRS (50 kb/s 500ms RTT) 
Regular 2G (250 kb/s 300ms RTT) 
Good 2G (450 kb/s 150ms RTT) 
Regular 3G (750 kb/s 100ms RTT) 
Good 3G (1 Mb/s 40ms RTT) 
Regular 4G (4 Mb/s 20ms RTT) 
DSL (2 Mb/s 5ms RTT) 
WiFi (30 Mb/s 2ms RTT) 

Disabled 

Y Nothrottling 


图 2-33 ”列表 中 显示 了 新 的 自 定 义 网 络 节 流 配置 
我 们 已 经 掌握 了 如 何在 不 同 浏览 器 中 使 用 性 能 评估 工具 。 本 章 最 后 将 简要 总 结 所 学 的 技术 。 
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本 章 介绍 了 很 多 关于 性 能 评估 工具 的 内 容 ， 相 信 你 一 定 已 经 掌握 了 ! 下 面 我 们 来 总 结 一 下 。 
口 Google PageSpeed Insights 是 一 个 有 用 的 在 线 工 具 , 它 可 以 分 析 URL, 并 为 该 URL 提供 性 
能 问题 列表 。 可 以 根据 该 列表 采取 行动 ， 加 快 网 站 的 速度 。 

口 尽管 PageSpeed Insights 很 有 用 ， 但 一 次 只 能 分 析 一 个 URL。 如 果 需 要 对 网 站 进行 大 量 的 
评估 , 可 以 使 用 Google Analytics , 它 可 以 为 特定 网 站 上 的 所 有 页 面 提供 PageSpeed Insights 
报告 。 

口 要 收集 有 关 网 络 请 求 的 计时 信息 ， 可 以 使 用 大 多 数 浏 览 器 的 开发 者 工具 集 。 这 些 信息 用 
于 检查 网 站 特定 资源 下 载 所 需 的 时 间 ， 并 将 时 间 有 段 分解 为 特定 阶段 ， 用 于 诊断 服务 器 性 
能 问题 。 

口 所 有 浏览 器 中 的 开发 者 工具 都 可 以 检查 HTTP 请 求 头 和 响应 头 。 可 以 使 用 此 信息 检查 请 

求 和 响应 的 许多 方面 ， 包 括 性 能 指标 ( 比如 服务 器 压缩 头 )。 

口 Chrome 的 Performance 面板 可 以 记录 并 检查 一 段 时 间 内 发 生 的 各 种 类 型 的 活动 。 通 过 这 些 

言 息 ， 可 以 确定 导致 性 能 问题 的 活动 ， 然 后 在 代码 中 修复 问题 。 还 可 以 使 用 JavaScript 标 
记 时 间 线 中 的 特定 点 ， 以 确定 录制 时 间 中 要 检查 的 点 。 
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口 可 以 通过 使 用 JavaScript console 对 象 的 time 和 timeEng 方法 执行 简单 的 基准 测试 ， 
从 而 量化 一 段 JavaScript 所 需 的 执行 时 间 。 

口 可 以 在 各 浏览 器 内 部 模拟 移动 设备 的 特性 。 使 用 这 些 工具 可 以 快速 了 解 任何 给 定 页 面 在 
类 似 设备 上 的 外 观 。 

口 在 Chrome 和 Safari 中 ， 可 以 分 别 检查 Android 和 iOS 设备 上 打开 的 页 面 。 连 接 这 些 设 备 
后 ， 可 以 使 用 主机 上 的 开发 者 工具 查找 和 诊断 性 能 问题 。 

D Chrome 的 网 络 节 流 工具 提供 了 实用 的 预 设 ， 但 这 些 预 设 可 能 无 法 覆盖 所 有 情况 ， 你 可 以 
创建 自己 的 自 定 义 配 置 来 模拟 特定 的 网 络 条 件 。 

现在 ， 我 们 可 以 进一步 优化 站 点 的 特定 部 分 了 。 第 3 章 将 介绍 一 些 优化 网 站 CSS 的 有 用 提 
示 和 方法 。 


优化 CSS 


本 章 内 容 

口 利用 简写 CSS 属性 和 CSS 浅 选 择 需 并 贯彻 DRY 原则 ， 减 小 CSS 的 大 小 

口 使 用 独特 的 页 面 模板 分 割 CSS 

口 理解 移动 优先 响应 式 Web 设计 的 重要 性 

口 了 解 移动 端 友好 页 面 的 要 素 ， 及 其 对 Google 搜索 排名 的 影响 

口 通过 避免 不 良 实 践 ， 以 及 使 用 高 性 能 的 CSS 选 择 器 、flexbox 布 局 引擎 和 CSS 过 渡 ， 提 高 
CSS 性 能 


我 们 已 经 学 习 了 如 何 使 用 浏览 器 提供 的 开发 者 工具 评估 性 能 , 接 下 来 可 以 开始 学 习 如 何 优化 
网 站 的 各 个 方面 了 。 我 们 从 优化 CSS 开始 。 本 章 ， 我 们 将 学 习 如 何 编写 高 效 的 CSS， 了 解 移动 
优先 响应 式 设计 的 重要 性 ， 以 及 提升 CSS 性 能 的 技巧 。 


3.1 直入 主题 ， 保 持 DRY 


当 你 开始 学 习 Web 开发 领域 的 一 个 新 主题 时 ， 首 先 关 注 的 可 能 是 那些 新 技术 和 亮点 。 虽 然 
Web 性 能 这 个 主题 确实 为 CSS 带 来 了 新 的 工具 ， 但 最 好 的 建议 是 : 编写 CSS 时 尽 可 能 简洁 。 这 
样 做 不 需要 新 的 工具 ， 只 需要 学 习 更 简洁 的 表达 方式 ， 并 坚持 使 用 即 可 。 

本 节 将 展现 保持 CSS 属性 和 选择 需 简 洁 的 重要 性 。 作 为 DRY ( Don’trepeat yourself, 不 要 重 
复 自己 ) 原则 的 一 部 分 ， 你 将 学 习 如 何 删除 多 余 的 CSS ， 探 索 在 网 站 上 分 割 CSS 的 潜在 好 处 ， 
并 通过 自 定义 框架 下 载 ， 尽 可 能 保持 网 站 框架 简洁 。 


3.1.1 简写 CSS 


使 用 简写 CSS ， 意 味 着 尽 可 能 使 用 最 不 宛 长 的 属性 和 属性 值 。 这 种 方法 短期 内 不 会 节省 很 
多 空间 ， 但 如 果 在 大 型 样式 表 中 持续 使 用 ， 累 积 效应 会 很 可 观 。 例 如 ,在 图 3-1 中 ,左边 的 规则 
使 用 了 一 组 占用 94 字 节 的 元 长 的 排版 样式 ,而 右边 的 规则 将 它们 组 合成 占用 60 字 节 的 单个 font 
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lr p{ 1 pt 

2 font-family: :"Arial", "Helvetica", .sans—serif; || 2 font: :italic-0.75rem- "Arial",."Helvetica", :sans—serif; 
3 font-size: :0.75rem; 3 } 

4 font—style: -italic; 4 

5 } 二 


普通 font 属 性 简写 font 属 性 (节约 35% 大 小 ) 
图 3-1 通过 font 属性 简写 CSS 


虽然 节约 34 字 节 本 身 并 不 算 什么 , 但 是 在 具有 大 型 样式 表 的 项 目 中 ， 持 续 使 用 这 种 方法 可 
能 会 节省 相当 大 的 空间 。 节省 空间 相当 于 减少 了 通过 线 缆 传输 的 字 节 , 这 意味 着 用 户 等 待 网 站 加 
载 的 时 间 更 短 。 对 于 移动 连接 尤其 如 此 ， 因 为 它 往往 比 家 里 或 办 公 室 的 宽带 连接 速度 慢 。 

下 面 看 一 个 可 以 通过 简写 属性 进行 改进 的 网 站 。 我 们 回 到 前 两 章 的 科 伊 尔 电器 维修 网 站 示 
例 。 将 简写 属性 应 用 于 其 CSS 时 ， 会 进一步 将 CSS 减 小 28%。 

在 选择 的 文件 夹 中 运行 以 下 命令 ， 在 本 地 计算 机 上 下 载 并 运行 客户 网 站 : 

git clone https://github.com/webopt/ch3-css.git 

cd ch3-css 


npm install 
node http.js 


开始 前 ， 请 打开 css 文件 夹 中 的 styles.css。 首 先 ， 使 用 几 个 易于 使 用 和 理解 的 简写 属性 。 在 
样式 表 中 ， 搜 索 div .pageWwrapper 选择 髓 ， 如 下 所 示 : 


div.pageWrappert 
width: 100%; 
max-width: 906px; 
margin-top: 0; 
margin-right: auto; 
margin-bottom: 0; 
margin-left: auto; 


} 
你 为 这 个 元 素 设置 了 边 距 ， 看 起 来 挺 合 理 吧 ? 其实 还 有 一 种 更 简洁 的 方式 来 表达 相同 的 
CSS。 要 介绍 的 第 一 个 简写 属性 是 margin 属性 。 图 3-2 显示 了 这 个 属性 及 其 工作 方式 。 
右边 距 左边 距 


margin: 20px 1l0px 30px 10px; 


/| 


上 边 距 下 边 距 


图 3-2 margin 简写 属性 包含 1~4 个 值 : margin-top、margin-right、 


margin-bottom 和 margin-left 


margin 属性 替换 margin-top、margin-right、margin-bottom 和 margin-left 属性 。 
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padding 属性 对 其 具体 属性 (例如 padqding-top ) 的 作用 相同 。 对 于 诸如 margin、padding 
这 样 的 简写 规则 ，4 个 参数 并 非 都 是 必需 的 。 可 以 忽略 的 参数 数目 取决 于 非 重复 值 的 数目 。 简 写 
属性 使 用 此 语法 时 的 注意 事项 如 下 。 
口 当 元 素 的 所 有 4 个 边 具 有 相同 的 值 时 , 使 用 一 个 值 。 如 果 元 素 的 4 个 边 都 有 20px 的 边 距 ， 
则 可 以 缩写 为 margin: 20px;。 
口 当 top/bottom 和 right/1left 值 相同 时 , 使 用 两 个 值 。 如 果 元 素 的 上 下 边 距 为 10px， 
左右 边 距 为 20px, 则 可 以 缩写 为 margin: 10px 20px;o 
口 当 只 有 right/1left 值 相同 , 但 top 和 bottom 值 不 同时 ,使 用 3 个 值 。 如 果 元 素 的 
上 边 距 为 10px， 右 边 距 和 左边 距 为 20px， 下 边 距 为 30px， 可 以 缩写 为 margin: 10px 
20pX 30BXs 
口 当 所 有 值 都 是 唯一 值 时 ， 使 用 全 部 4 个 值 。 
通过 这 种 方法 ， 即 可 按照 以 下 方式 减少 div .pageWrapper 选择 器 的 内 容 : 
div.pageWrappert{ 
width: 100%; 
max-width: 906px; 
margin: 0 auto; 
} 
此 处 有 4 个 属性 , 目的 是 将 div .pageWwrapper 元 素 的 上 下 边 距 设置 为 0, 将 左右 边 距 设置 
为 auto， 并 将 它们 缩减 为 一 个 表示 相同 内 容 的 属性 。 在 styles.css 中 ， 应 用 此 属性 的 一 种 非典 型 
做 法 是 : 当 margin-rignt 和 margin-left 值 相 同 , 但 margin-top 和 margin-bottom 值 
是 唯一 的 时 ， 将 该 属性 设置 为 3 个 值 。 以 下 面 这 个 CSS 为 例 : 
header div.phoneNumber hil.numbert{ 
font-size: 55px; 
font-weight: normal; 
ODLGLE OEE 
margin-top: 0; 
margin-right: 0; 


margin-bottom: -8px; 
margin-left: 0; 


} 
上 述 规则 可 以 更 简洁 地 表达 为 : 


header div.phoneNumber hl.numbert{ 
font-size: 55px; 
font-weight: normal; 
GOlLOE: eT 下放 
margin: 0 0 -8px; 
} 


在 这 种 简写 形式 中 ,可 以 省 略 最 后 的 0， 因 为 左右 边 距 的 值 是 相同 的 。 乍 看 起 来 可 能 不 太 直 
观 ， 但 随 着 实践 ， 你 很 快 就 会 习惯 。 
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margin 和 padding 是 最 容易 理解 的 简写 属性 , 因为 它们 仪 控 制 间 距 和 大 小 。 还 有 适用 于 视 
党 元 素 的 其 他 简写 属性 ， 例 如 边框 属性 。 以 客户 网 站 CSS 中 的 a img 选择 器 为 例 : 
a img{ 
border-top: 0; 
border-right: 0; 
border-bottom: 0; 
border-left: 0; 
} 


可 以 以 更 简洁 的 方式 表达 这 些 边 框 样式 : 
a img{ 
border: 0; 

} 

将 这 些 边 框 属 性 压缩 为 单个 属性 ， 不 仅 可 以 剔除 不 必要 的 规则 ， 而 且 更 方便 。 请 注意 ， 与 
margin 和 padding 等 简写 属性 不 同 , porder 属性 只 能 用 于 设置 元 素 上 的 所 有 边框 。 如 果 元 素 
的 任何 一 侧 需 要 不 同 的 边框 样式 ， 则 需要 使 用 更 具体 的 borqer-top 、borqer-right、 
border-bottom 和 border-left 属性 。 


覆盖 和 简写 属性 
在 特定 上 下 文中 和 履 盖 某 元 素 简写 属性 的 一 部 分 时 ,你 可 能 会 尝试 复制 原始 的 简写 属性 , 并 
只 更 改 所 需 的 值 。 这 会 降低 代码 的 可 维护 性 ， 应 当 避 免 。 如 果 元 素 具 有 margin: 20px 属性 ， 
并 且 需 要 在 新 的 上 下 文中 履 盖 同一 元 素 的 下 边 距 ， 则 最 好 使 用 更 具体 的 margin-bottom。 这 
样 ， 对 原始 上 下 文中 边 距 值 的 任何 更 改 都 将 被 新 的 上 下 文 继承 。 


整理 客户 网 站 CSS 时 ,需要 使 用 的 简写 属性 是 margin、padding、border、background 
和 border-radius。 这 些 只 是 其 中 的 一 小 部 分 ， 你 可 以 通过 Google 找到 一 个 更 完整 的 列表 。 
努力 解决 这 些 问题 并 尽 可 能 缩小 文件 后 ， 我 能 够 将 CSS 从 原来 的 18.5 KB 减 小 到 13.33 KB。 
尔 遇 到 麻烦 ， 想 看 看 我 是 怎么 做 的 ， 可 以 输入 git checkout -f shorthand， 完 成 后 的 


如 果 人 
代码 将 下 载 到 你 的 计算 机 上 。 

现在 你 已 经 知道 如 何 使 用 简写 属性 编写 更 简洁 的 CSS， 并 能 够 通过 简单 的 准则 精简 CSS 文 
件 。 接 下 来 ,我 们 将 了 解 CSS 浅 选 择 器 的 重要 性 ， 以 及 它们 如 何 为 精简 样式 表 做 出 贡献 。 


3.1.2 ”使 用 CSS 浅 选择 器 


写 CSS 时 ,浅显 是 一 种 优点 。 此 处 说 的 “浅显 ”， 指 的 是 CSS 选择 器 的 具体 性 。 过 于 具体 的 
选择 器 层次 很 深 ,而 较 浅 的 选择 絮 则 只 指定 匹配 元 素 所 需 的 内 容 。 

在 大 型 样式 表 中 ， 保持 CSS 选择 器 简洁 可 以 节省 空间 。 通 过 降低 复杂 度 ， 可 以 使 样式 表 保 
持 简洁 并 缩短 加 载 时 间 ， 从 而 提高 页 面 性 能 。 在 图 3-3 中 ， 可 以 看 到 针对 同一 元 素 的 一 个 过 于 有 具 
体 的 选择 器 和 一 个 较 浅 的 选择 器 。 
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div.mainContent div.genericContent div,ListContainer ul.genericList{ genericList{ 
width: 202px; width: 202px; 
margin-right: 12px; margin-right: 12px; 
float: left; float: left; 
display: inline; display: inline; 
list-style: none; list-style: none; 
} } 
过 于 具体 更 简洁 ( 减 小 82%) 


图 3-3 一 个 过 于 具体 的 CSS 选择 器 ( 左 ) 与 一 个 更 简洁 的 CSS 选择 器 〈 右 ) 
左边 的 选择 器 是 67 个 字符 ， 而 右边 的 选择 器 是 12 个 字符 


虽然 这 个 示例 只 减少 了 55 个 字符 ， 但 这 只 是 单个 选择 器 。 应 用 于 整个 样式 表 时 ， 其 优点 会 
变 得 更 加 明显 。 
3.1.3 ”挑选 浅 选择 器 

检查 过 于 具体 的 选择 器 的 一 种 方法 是 ,扫描 CSS 中 包含 超过 一 个 元 素 的 选择 器 。 理 想 情况 
下 ， 选 择 器 深度 应 该 仅 限 于 目标 元 素 。 虽 然 这 并 不 总 符合 实际 ， 但 是 应 当 避 免 追 求 具体 性 。 

从 你 离开 的 地 方 继续 ， 打 开 css 文件 夹 中 的 styles.css 并 大 致 浏览 。 如 你 所 见 ， 大 多 数 选择 需 
过 于 具体 。CSS 的 大 小 约 为 13.3 KB。 虽 然 并 不 庞大 ， 但 考虑 到 选择 器 的 明确 性 ， 你 可 以 缩减 选 
择 器 。 完 成 本 节 之 后 ， 可 以 将 客户 网 站 CSS 减少 38%。 

可 以 在 styles.css 中 搜索 div.marauelass 选择 器 ,从 而 找到 一 个 不 那么 具体 的 选择 器 示例 。 
这 一 行 的 完整 选择 器 如 下 所 示 : 


header div.phoneNumber h3 .numberHeader 


它 可 以 重 写 为 更 短 的 形式 : 


.numberHeader 


修改 后 ,保存 并 重新 加 载 页 面 。 注 意 ， 页 面 样式 看 起 来 是 一 样 的 。 在 整个 CSS 文件 中 重复 
这 个 过 程 ， 消 除 选择 器 的 所 有 特定 性 ， 同 时 不 要 破坏 页 面 样式 。 无 论 何 时 进行 实质 性 更 改 ， 请 在 
浏览 器 中 重新 加 载 页 面 ， 并 验证 没有 任何 内 容 被 破坏 。 如 果 你 遇 到 问题 或 想 查看 最 终结 果 ， 可 以 
输入 git checkout -f selectors， 完 成 的 代码 将 下 载 到 你 的 计算 机 上 。 

完成 后 , 你 可 以 使 用 名 为 uncss 的 Node 程序 从 样式 表 中 删除 所 有 未 使 用 的 CSS。 使 用 以 下 
两 个 命令 进行 全 局 安装 ， 并 对 客户 网 站 根 文件 夹 中 的 CSS 文件 运行 该 程序 : 

npm install -9 uncss 

uncss http://localhost:8080 -i .modal.open > css/styles.clean.css 


这 条 命令 接受 一 个 URL 参数 。 在 本 例 中 ,你 告诉 程序 查看 本 地 运行 的 客户 网 站 。-i 选项 是 另 
一 个 参数 ， 用 于 告诉 程序 应 该 保留 哪些 选择 需 。 在 这 个 例子 中 ， 我 们 希望 uncss 保留 .modal .open 
类 ， 这 个 类 用 于 将 模 态 框 请 入 视图 。 

uncss 完成 后 ， 可 以 将 index.html 中 的 <1ink> 标 签 切 换 到 新 生成 的 styles.clean.css， 或 者 将 其 
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内 容 复 制 到 styles.css 中 。 完成 此 步骤 后 , 客户 网 站 的 CSS 将 减少 38%, 从 13.24 KB 精简 到 8.2 KB。 


3.1.4 LESS 和 SASS 预 编译 器 : 简单 就 是 美 


CSS 预 编 译 需 在 前 端 开发 人 员 的 工具 包 中 占据 重要 地 位 。 预 编译 需 提 供 了 纯 CSS 中 不 可 用 
的 特性 ， 包 括 变量 、 用 于 重用 样式 的 函数 ( 称 为 mixin ) 和 帮助 CSS 模块 化 的 导 和 功能。 这些 
工具 将 用 预 编译 语言 编写 的 文件 编译 成 浏览 需 可 以 理解 的 纯 CSS。 流 行 的 预 编译 吉 有 LESS 和 
SASS。 
如 果 使 用 这 些 工 具 来 代替 编写 纯 CSS ， 那 么 你 可 能 会 用 到 选择 器 的 骨 套 功能 。 


代码 清单 3-1 LESS 和 SASS 选择 器 般 套 
#mainf < 一 父 级 选择 器 
max-width: 1280px; 
width: 100%; 


#mainColumnt{ 村 一 一 一 一 
width: 65%; 
margin: 0 2% 0 0; 
display: inline-block; 嵌 套 子 选 择 器 
float: left; 
} 


#sideColumnt{ < 一 
width: 33%; 
display: inline-block; 
float: left; 


} 

看 起 来 不 错 , 但 它 对 开发 人 员 来 说 更 像 是 一 种 服务 。 它 更 具 可 读 性 ， 因 为 模仿 了 HTML 的 层 
次 结构 ， 但 这 种 便利 性 是 以 性 能 为 代价 的 。 当 这 段 代码 被 编译 成 普通 的 CSS 时 ， 如 代码 清单 3-2 
所 示 。 


代码 清单 3-2 ”编译 后 的 LESS/SASS 岗 套 选择 器 
#mainf 
max-width: 1280px; 
width: 100%; 


} 


#main #mainColumnt{ 
width: 65%; 
margin: 0 2% 0 0; 
display: inline-block; 
float: left; 

} 


#main #sideColumnt 
width: 33%; 


3.1 直入 主题 ， 保 持 DRY 53 


display: inline-block; 
float: left; 
} 


编译 后 ， 原 始 LESS/SASS 代码 中 的 向 套 使 CSS 选择 器 过 于 具体 。 在 这 种 情况 下 ，#main 的 
每 个 子 节点 现在 都 太 具 体 了 。 髓 套 越 深 , 问题 越 大 。 压 缩 和 缩小 确实 在 一 定 程度 上 缓解 了 这 种 情 
况 , 但 这 些 过 于 具体 的 选择 器 也 会 延长 泻 当 时间。 要 尽 可 能 少 用 这 个 功能 ， 因 为 看 不 到 的 东西 会 
伤害 你 。 


3.1.5 不 要 重复 自己 

前 端 开发 人 员 在 CSS 中 遇 到 的 另 一 个 问题 是 ， 选 择 顺 之 间 的 属性 经 常 重复 。 例 如 ， 多 个 选 
择 器 指定 相同 的 背景 色 或 字体 样式 。 可 以 通过 最 小 化 属性 声明 的 次 数 , 减少 代码 膨胀 , 并 使 CSS 
更 易于 维护 。 


3.1.6 ”实现 DRY 


DRY 原则 很 简单 ， 就 是 试图 在 可 行 的 情况 下 减少 CSS 中 的 宛 余 。 图 3-4 展示 了 DRY 的 一 个 
实例 。 


nainColum{ 一 zainCoLumn， 


background : -#fff; 一 #sideColumn{ 
} background: #fff; 
} 


#sideColumn{ 
background: -#fff; 一 -一 


DRY 前 DRY 后 


图 3-4 DRY 示例。 两 个 选择 器 具有 相同 的 packgroung 属性 。 为 了 节省 空间 和 消除 
匈 余 ， 将 选择 器 组 合 在 一 起 使 用 backgroung 属性 


这 个 例子 说 明了 DRY 的 一 个 基本 应 用 。 两 个 选择 器 包含 相同 的 backgroung 规则 。DRY 要 
求 将 这 些 功能 结合 起 来 以 节省 空间 ， 同 时 提供 更 高 的 可 维护 性 。 查 找 匈 余 的 一 种 方法 是 ,寻找 通 
用 的 规则 ， 并 将 它们 组 合 到 多 个 选择 器 下 。 

如 果 熟 悉 项 目的 CSS, 那么 这 种 处 理 问 题 的 方法 尚 能 接受 。 你 可 以 列 出 项 目 中 的 常用 属性 和 
选择 器 ,并 以 有 意义 的 方式 对 它们 进行 分 组 。 命 名 方式 取决 于 你 的 偏好 。 包 括 我 在 内 的 一 些 人 喜 
欢 使 用 描述 内 容 的 选择 器 名 称 ( 例如 ，#navigation 或 .siteHeader )， 而 不 是 那些 描述 文档 
结构 的 选择 器 名 称 ( 例如 Bootstrap 的 .col-md-1、.col-md-offset-3 和 类 似 的 选择 器 名 称 )。 
HTML 5.1 规范 草案 鼓励 开发 者 选择 描述 内 容 性 质 而 不 是 其 表现 形式 的 选择 器 名 称 。 

有 些 开发 人 员 更 喜欢 表现 式 的 风格 。 流行 的 CSS 框架 Bootstrap 在 其 CSS 中 大 量 使 用 这 种 风 
格 的 选择 器 名 称 。 不 管 你 决定 如 何 编写 CSS， 好 消息 是 ， 这 两 种 方法 都 不 能 阻止 你 应 用 DRY。 

不 幸 的 是 ， 查 找 见 余 本 身 可 能 是 一 项 艰巨 的 任务 ， 而 这 就 是 CSS 宛 余 检 查 器 的 用 武之 地 。 
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3.1.7 使 用 csscss 查 找 见 余 


csscss 是 一 个 命令 行 工具 ,可 以 在 CSS 中 查找 元 余 。 这 是 重 构 CSS 的 一 个 好 起 点 。 要 安装 
csscss, 需要 使 用 Ruby 的 gem 安装 程序 , 它 类 似 于 Node 的 npm 可 执行 文件 , 但 用 于 安装 Ruby 
包 。OSX 预 装 了 Ruby。 如 果 你 安装 了 SASS， 即 可 使 用 gem。 

如 果 还 没有 安装 Ruby， 那 么 要 安装 也 很 简单 。 而 且 csscss 本 身 的 价值 也 值得 这 么 做 。 要 
在 Windows 上 安装 Ruby, 请 访问 http:/rubyinstallerorg/downloads， 获 取 适 合 你 系统 的 安装 程序 。 
安装 软件 的 过 程 简单 是 有 指导 。 安 装 Ruby 之 后 ， 键 入 以 下 命令 ， 使 用 gem 安装 csscss: 


gem install csscss 


稍 等 片刻 ，genm 包 管 理 器 就 会 安装 csscss, 你 可 以 在 一 个 CSS 文件 上 运行 它 。 尝 试 在 客户 
网 站 的 styles.css 文件 上 运行 : 


csscss styles.css -Vv -~--no-match-shorthand 


这 条 命令 使 用 两 个 参数 检查 styles.css 是 否 有 多 余 的 规则 。-v 参数 告诉 程序 要 详细 打印 出 匹 
配 的 规则 。--no match-shorthang 参数 使 程序 不 会 将 任何 简写 规则 ( 如 border-bottom ) 
扩展 为 更 明确 的 规则 (如 porder-bottom-style 样式 )。 如 果 要 扩展 这 些 规则 ， 请 删除 这 个 开 
关 。 程 序 输出 将 显示 跨 元 素 间 的 所 有 宛 余 样 式 。 以 下 代码 是 这 些 规 则 的 一 个 示例 。 


代码 清单 3-3 ”部 分 csscss 输出 
{#okayButton}, {#schedule} AND {.submitAppointment a} share 12 declarations 
- background: #c40a0a 
- border-bottom: 4px solid #630505 
- border-radius: 8px 
ae 


- display: inline-block 


font-size: 20px 
- font-weight: 700 
- letter-spacing: -0.5px 


- line-height: 22px 

- padding: 12px 16px 

- text-decoration: none 

- text-transform: uppercase 


这 个 规则 是 一 个 很 好 的 开始 ， 因 为 这 些 选 择 器 的 CSS 在 以 上 选择 需 中 是 一 致 的 。 此 时 可 以 
从 头 到 尾 将 这 些 内 容 清理 一 遍 。 这 个 简短 的 练习 结束 后 ， 可 以 将 styles.css 再 精简 10%。 以 代码 
清单 3-3 中 的 规则 为 例 ， 执 行 以 下 操作 。 

(1) 合并 选择 器 和 规则 一 一 将 #okayButton、#schedule 和 .submitAppointment a 这 些 
选择 器 合成 一 个 逗号 分 隔 的 选择 器 ， 并 从 程序 输出 中 复制 烙 贴 建议 的 规则 。 在 styles.css 末尾 创 
建新 规则 时 ， 内 容 应 该 如 代码 清单 3-4 所 示 。 
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代码 清单 3-4 从 csscss 输出 中 合并 CSS 规则 
#0okayButton, 
#schedule, 
.SubmitAppointment af 
background: #c40a0a; 
border-bottom: 4px solid #630505; 
border-radius: 8px; 
COLOrY Off > 
display: inline-block; 
font-size: 20px; 
font-weight: 700; 
letter-spacing: -0.5px; 


line-height: 22px; 
padding: 12px 16px; 
text-decoration: none; 
text-transform: uppercase; 
} 
(2) 清除 单个 选择 器 中 的 匹配 规则 一 一 返回 代码 前 面 ， 并 将 #okayButton、#schedule 和 
.submitAppointment a 多 余 的 规则 移 除 。 
(3) 重新 运行 csscss ， 检 查 输出 ， 并 重复 前 面 的 步骤 一 一 清理 完 旧 选择 器 中 的 元 余 规则 后 ， 
重新 运行 csscss， 验 证 优化 后 的 规则 是 否 已 从 代码 中 删除 。 
在 csscss 提出 的 一 些 建议 中 ， 你 可 能 注意 到 ， 规 则 会 在 不 同 的 临界 点 中 重复 或 相互 冲突 ， 
因为 这 些 元 素 的 CSS 随 着 屏幕 宽度 的 变化 而 变化 。 代 码 清单 3-5 针对 这 个 问题 给 出 了 建议 。 


代码 清单 3-5 有 问题 的 csscss 输出 


{.greyStrip} AND {.phoneNumber} share 5 declarations 


- position: absolute 

- position: static 具有 冲突 元 余 值 的 重复 
- right: 0 position 属性 

二 站 主人 可 

RE 具有 冲突 元 余 值 的 


重复 right 属性 


此 规则 返回 相同 属性 的 不 同 宛 余 。 这 是 因为 , csscss 在 桌面 CSS 的 一 个 临界 点 中 看 到 宛 余 ， 
然后 在 移动 CSS 中 看 到 另 一 个 元 余 。 可 以 尝试 合并 这 些 值 ， 但 这 可 能 是 一 项 艰巨 的 任务 。 对 于 
响应 式 网 站 ， 最 佳 方式 是 组 合 临界 点 上 所 有 通用 的 值 。 

缩减 代码 清单 3-5 并 且 使 csscss 没有 任何 建议 后 , 就 可 以 把 CSS 减少 10% , 变 为 7.42 KB。 
这 个 效果 可 能 因 项 目 而 异 , 但 节省 10% 并 不 是 一 小 数目 。 从 本 章 开 始 到 现在 , 经 过 你 的 努力 , 已 
经 将 网 站 的 CSS 从 18.5 KB 减少 到 7.42 KB， 降 幅 约 为 60%。 相 当 可 观 ! 在 下 一 节 ， 你 将 了 解 分 
市 CSS 的 重要 性 。 


Tr 
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3.1.8 ”分割 CSS 


优化 CSS 的 方法 之 一 是 进行 分 制 。 分 割 指 的 是 根据 特定 页 面 模板 拆 分 CSS 样式 。 将 网 站 的 
所 有 CSS 合并 到 一 个 文件 中 是 合理 的 , 这 样 用 户 在 第 一 次 访问 时 就 已 经 缓存 了 网 站 的 所 有 CSS。 
然而 ， 以 这 种 方式 提供 CSS 可 能 是 一 场 赌博 ， 因 为 用 户 可 能 永远 不 会 跳 转 到 子 页 面 。 一 部 
分 用 户 将 被 迫 为 他 们 永远 看 不 到 的 页 面 下 载 CSS。 这 样 做 会 减 慢 用 户 初次 访问 网 站 时 的 速度 。 更 
安全 的 做 法 是 将 负担 分 散在 几 个 页 面 上 ， 但 处 理 方式 要 明智 ， 如 图 3-5 所 示 。 
{ { 


用 styles.css about.css 


about.html 
请 求 about.css 


index.html 
请 求 styles.css 


入 
用 户 请 求 index.html 
| < > 


index.html abouthtml 
图 3-5 用 户 浏览 页 面 的 流程 ， 其 中 的 CSS 按 页 面 模板 分 割 。 浏 览 器 只 下 载 当前 页 面 所 需 的 CSS 


有 一 种 数据 驱动 方法 可 以 决定 如 何 分 割 网 站 CSS: 查看 其 分 析 报 告 以 及 用 户 浏览 网 站 的 路 
径 。 有 了 Google Analytics 这 样 的 工具 ,你 就 可 以 将 这 些 信息 可 视 化 ， 进 而 做 出 明智 的 分 割 决策 。 

如 果 已 经 为 网 站 设置 了 Google Analytics， 可 以 通过 登录 Google Analytics 访问 此 信息 。 然 后 
导航 到 左 侧 菜单 中 的 Behavior 部 分 ， 并 在 子 菜单 中 选择 Behavior Flow 选项 ， 查 找 访客 流 信息 ， 
如 图 3-6 所 示 。 


回 Behavior 


Overview 
ee a 点 击 Behavior Flow 选 项 
» Site Content 
图 3-6 ”Google Analytics 中 左 侧 菜 单 的 Behavior 部 分 。 点 击 Behavior 子 菜单 中 的 
Behavior Flow 链接 ， 可 以 看 到 访客 流 


点 击 此 选项 后 ， 将 填充 右 侧 窗 格 。 在 图 3-7 中 ， 可 以 看 到 通过 这 个 网 站 的 一 个 简单 用 户 流 ， 
大 多 数 用 户 着 陆 到 主页 (index.html )， 很 少 有 人 进入 子 页 面 。 
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着 陆 页 下 一 次 跳 转 
A _- 人 -_ 
a 1 人 
Starting pages 1st Interaction 
144 sessions, 130 drop-offs 14 sessions, 9 drop-offs 
mm | mm brands.html | 
I 117 夯 6 
equipment.html 
曾 spme 
exticoyle/o...index.html | 
me exticoylelo...index.htm 
| 2 , 
m= Old/ 
[| 
面 ee 
m= /exticoylel...index.html 六 
I 15 
面 ee him 
用 户 到 达 ee nh 
不 同 的 着 陆 页 Ws 
lbrands.html | 
m= brands.htm 
8 本 2 
而 a htm 


a 、 1 
mm (4 more pages) 


而 , 


图 3-7 Google Analytics 的 访客 流程 图 。 从 左边 开始 ， 你 可 以 看 到 用 户 进 入 网 站 的 位 置 。 
这 种 情况 下 ， 绝 大 多 数 用 户 是 从 网 站 主页 上 进入 的 ， 很 少 有 访客 点 击 进 入 子 页 面 


掌握 这 个 信息 后 ， 分 割 网 站 CSS 的 任务 就 简单 了 ， 从 而 能 够 实现 最 佳 传输 。 此 时 ， 将 二 级 
页 面 的 样式 从 主 样式 表 拉 到 单独 的 文件 中 就 理 所 应 当 了 。 

如 何 实现 这 一 点 取决 于 网 站 本 身 以 及 具体 的 CSS。 如 果 大 多 数 页 面 模板 是 相似 的 , 并 且 样 式 
是 高 度 通 用 的 , 那么 坚持 使 用 一 个 样式 表 是 有 意义 的 。 但 是 如 果 很 多 页 面 模板 具有 不 同 的 特定 样 
式 ， 请 检查 用 户 的 行为 并 据 此 做 出 决定 。 

假设 网 站 有 一 个 搜索 结果 页 面 , 并 且 只 有 小 部 分 用 户 访问 它 。 逻辑 要 求 应 该 分 离 特 定 于 该 页 
面 的 CSS， 并 将 其 放 在 单独 的 文件 中 ， 然 后 将 其 包含 在 相关 页 面 上 。LESS 和 SASS 等 现代 工具 
使 CSS 模块 化 成 为 一 项 简单 的 任务 ,模块 化 带 来 的 性 能 优势 值得 考虑 。 


3.1.9 自 定义 框架 下 载 


CSS 框架 是 前 端 开发 领域 的 一 个 重要 部 分 ， 带 来 的 好 处 也 不 少 。CSS 框架 可 以 节省 时 间 ， 为 
开发 者 提供 优秀 的 服务 。 如 果 使 用 CSS 框架 的 好 处 能 够 转化 为 对 用 户 的 好 处 ， 那 么 就 值得 考虑 
它们 O 

虽然 “多 多 益 善 ”， 但 是 也 可 以 从 这 些 库 中 删 去 不 需要 的 内 容 。 比 如 Bootstrap 和 Foundation 
这 样 的 流行 框架 就 允许 开发 人 员 定制 下 载 , 如 图 3-8 所 示 。 在 Bootstrap 中 不 需要 打印 媒体 CSS? 
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把 它 扔 掉 。 不 需要 表格 样式 ”删除 它们 。 虽 然 这 些 特性 很 好 , 但 当 你 强制 用 户 下 载 代 码 而 之 后 再 
也 不 使 用 这 些 特性 时 ， 它 们 就 将 成 为 性 能 负担 。 


Choose which Less files to compile into your custom build of Bootstrap. Not sure which files 
to use? Read through the CSS and Components pages in the docs. 


Common CSS Components JavaScript 

Print media styles Glyphicons components 
Typography Button groups re (for JS) 
Code Input groups Dog 

Grid system Navs Tooltip 

Tables Navbar Popover 

Forms Breadcrumbs oa 

Buttons Pagination Cardissl 

Responsive utilities Pager 


图 3-8 Twitter Bootstrap 网 站 上 的 下 载 自 定 义 屏 幕 。Bootstrap 允许 开发 者 在 自 定 义 下 载 
中 指定 用 户 希 望 使 用 框架 的 哪些 部 分 


下 载 定制 的 框架 代码 后 , 不 要 害怕 进一步 删除 其 他 不 需要 的 代码 。 这 些 框架 可 能 会 给 用 户 带 
来 很 高 的 前 期 成 本 。 如 果 一 个 项 目 结束 时 , 你 发 现 有 很 多 东西 可 以 删 减 ,那么 可 以 通过 删除 网 站 
上 不 必要 的 代码 来 为 访问 者 提供 服务 。 

我 们 已 经 知道 如 何 分 割 CSS, 并 理解 从 框架 中 删 减 不 必要 代码 的 重要 性 , 接 下 来 讨论 移动 优 
先 响 应 式 Web 开发 的 重要 性 。 


3.2 ”移动 优先 即 用 户 优先 


过 去 几 年 间 ， 前 端 开发 的 准则 已 经 从 “简单 ” 变 为 “更 加 精细 ”。 这 在 一 定 程度 上 是 由 于 设 
计 师 Ethan Marcotte 开创 的 响应 式 Web 设计 原则 的 出 现 。 过 去 ,开发 人 员 会 为 移动 设备 创建 单独 
的 网 站 ,这 些 网 站 的 功能 比 桌 面 版 本 要 少 。 现 在 这 种 方法 已 经 不 受 欢迎 ,开发 人 员 转 而 采用 响应 
式 Web 设 计 。 

响应 式 Web 设计 使 用 一 系列 标记 ， 并 根据 设备 的 显示 尺寸 ， 通 过 CSS 修改 其 表现 形式 。 这 
些 维度 ( 通常 是 宽度 ) 使 用 媒体 查询 进行 检查 ， 并 根据 最 小 宽度 或 最 大 宽度 值 进行 计算 。 因 为 媒 
体 查 询 非常 灵活 ， 所 以 出 现 了 两 种 响应 式 Web 设计 方法 : 桌面 优先 和 移动 优先 。 本 节 将 介绍 这 
两 种 方法 之 间 的 区 别 ， 以 及 移动 友好 网 站 对 于 Google 搜索 排名 的 重要 性 。 


3.2.1 移动 优先 与 桌面 优先 


移动 优先 和 桌面 优先 是 响应 式 Web 设计 的 两 种 方法 ， 如 图 3-9 所 示 。 

这 两 种 技术 都 是 从 一 套 基 本 的 CSS 开始 的 。 这 套 CSS 不 包含 在 任何 媒体 查询 中 ， 它 定义 网 
站 的 默认 外 观 。 使 用 移动 优先 方法 ,默认 外 观 就 是 站 点 的 移动 端 版 本 ; 而 在 桌面 优先 网 站 中 ， 默 
认 外 观 是 网 站 的 桌面 版 本 。 
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移动 优先 响应 式 设计 
区 从 作 为 了 动人 
义 ， 并 且 随 着 屏幕 寅 度 
[ ed < 的 增 大 而 增加 复杂 性 
介面 优先 响应 式 设计 


ee el 
义 且 随 着 屏幕 宽度 
4 一 的 减 小 而 降低 复杂 性 


图 3-9 ”移动 优先 和 桌面 优先 的 响应 式 设计 流程 


应 当 以 用 户 为 中 心 选择 使 用 哪 种 技术 ,而 桌面 优先 的 响应 式 设计 不 是 用 户 优先 的 。 使 用 移动 
优先 方法 ,首先 要 构建 最 简单 的 网 站 外 观 , 然后 随 着 规模 的 扩大 而 增加 复杂 性 ， 因 为 会 有 越 来 越 
多 的 用 户 使 用 移动 设备 访问 Web， 如 图 3-10 所 示 。 


移动 设备 和 桌面 设备 上 的 用 户 分 布 


100 王 

80 上 移动 (手机 和 平板 计算 机 ) 
衬 60 上 
信 
江 
村 
还 40 

20 上 

LI | 
0 70 3011 302 2013 2014 2015 


自然 年 


图 3-10 移动 设备 与 笔记 本 计算 机 设备 的 互联 网 流量 趋势 。 到 2015 年 底 ， 互 联网 上 
近 一 半 的 流量 发 生 在 移动 设备 上 ， 而 这 一 趋势 仍 在 继续 〈 来 自 StatCounter 
全 球 统计 数据 ) 
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移动 优先 CSS 的 优势 在 于 ,你 为 最 有 可 能 使 用 网 站 的 设备 提供 CSS 服务 。 由 于 移动 设备 的 
处 理 能 力 和 内 存 通常 低 于 桌面 设备 ， 因 此 不 必 应 用 桌面 样式 和 解释 媒体 查询 ， 然 后 才 应 用 移动 

从 长 远 来 看 ， 这 对 开发 人 员 来 说 也 有 好 处 : 你 可 以 随时 扩大 规模 ( 而 不 是 缩小 规模 )。 相 比 
于 在 缩小 规模 的 时 候 移 除 某 些 内 容 ， 从 最 简单 的 起 点 出 发 ， 更 容易 进行 优化 。 

从 移动 优先 CSS 开始 很 容易 。 大 多 数 情况 下 ， 你 的 开发 工作 要 适 配 三 种 设备 类 型 : 手机 、 
平板 计算 机 和 人 台式 机 。 除 了 基本 的 CSS 之 外 ， 所 有 这 些 内 容 都 位 于 它们 自己 的 媒体 查询 ( 通常 
称 为 临界 点 ) 中 。 媒 体 查 询 是 应 用 新 样式 的 特定 点 。 这 一 点 通常 是 屏幕 宽度 的 变化 ( 尽管 也 存在 
高 度 的 媒体 查询 )。 在 移动 优先 CSS 的 情况 下 ， 移 动 样式 是 基础 ， 而 平板 计算 机 和 桌面 是 布局 发 
生变 化 的 临界 点 。 图 3-11 显示 了 三 种 设备 类 型 上 的 一 组 临界 点 。 


布局 复杂 度 随 着 屏幕 
默认 样式 分 辨 率 的 增 大 而 增加 


国 | 人 
未 定义 临界 点 min-width: min-width: 
37 .5em Bb2.58m 


图 3-11 移动 优先 网 站 上 跨 临 界 点 的 布局 复杂 性 流 


在 图 3-11 中 你 会 注意 到 : 临界 点 是 使 用 em 单位 而 不 是 px 单位 设置 的 。em 是 根据 文档 的 默 
认 字 体 大 小 (通常 为 16px ) 计算 的 相对 单位 。 可 以 使 用 一 个 简单 的 公式 计算 em 值 : 


px /默认 文字 大 小 =em 


此 时 ,平板 计算 机 的 临界 点 500px, 除 以 默认 的 文档 字体 大 小 16px, 得 到 的 值 就 是 37 .5em。 
1000px 的 桌面 临界 点 使 用 相同 的 公式 转换 ， 得 到 的 值 就 是 62 .5em。 


em 和 rem 的 区 别 
em 是 特定 于 上 下 文 的 单位 。 在 媒体 查询 中 ， 上 下 文 是 HTML 文档 的 默认 font-size。 在 
文档 的 层次 结构 中 更 深入 地 使 用 em 时 ， 它 们 的 上 下 文 可 能 发 生变 化 。 如 果 其 父 级 元 素 的 字体 
大 小 为 12px， 则 em 值 是 通过 将 原始 px 值 除 以 12 来 计算 的 。rem 单位 类 似 于 em， 只 是 它 的 
上 下 文 总 是 依据 文档 根 节点 的 默认 字体 大 小 ,而 不 是 其 父 元 素 的 字体 大 小 ,rem 有 广泛 的 支持 ， 
但 尚未 通用 。 如 果 你 的 项 目 需 要 支持 传统 浏览 器 ， 请 谨慎 使 用 rem。 
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代码 清单 3-6 显示 了 一 个 简单 的 移动 优先 响应 式 网 站 的 起 点 。 
代码 清单 3-6 移动 优先 CSS 样板 


重 置 写 在 这 里 */ CSS 重 置 放 
font-size: 16px; 
} 设置 <cntml> 元 素 的 
默认 字体 大 小 集 
移动 端 /* 移动 样式 写 在 这 里 */ 
样式 


@media screen and (min-width 37.5em){ /* 600px / 1l6px */ 


/* 平板 样式 写 在 这 里 */ 
} 平板 特定 样式 


@media screen and (min-width 62.5em){ /* 1000px / 1l6px */ 
/* 桌面 样式 写 在 这 里 */ 
) ”| 桌面 特定 样式 
在 这 个 样板 文件 中 ， 首 先 出 现 的 是 CSS 重 置 。Eric Meyer 编写 了 一 个 流行 的 CSS 重 置 。 这 
些 样式 重 置 元 素 的 margin、padaing 和 其 他 属性 ， 以 规范 浏览 器 之 间 不 一 致 的 默认 样式 。 接 下 
来 是 作为 基本 CSS 的 移动 样式 ， 然 后 是 平板 计算 机 样式 ， 最 后 是 桌面 样式 。 


选择 临 表 点 
编写 响应 式 网 站 代码 时 ,你 很 容易 会 使 用 常见 的 设备 宽度 。 要 抑制 住 这 样 做 的 冲动 ， 然 后 
选择 与 设计 相关 的 阅 值 。 编写 代码 时 ,不 要 害怕 添加 次 要 的 临界 点 。 流行 的 做 法 是 : 调整 浏览 
器 窗口 的 大 小 ， 直 到 布局 中 断 时 ， 就 添加 另 一 个 临界 点 ， 并 修复 新 临界 点 内 的 布局 问题 。 


现在 , 你 要 像 往常 一 样 在 <1ink> 标 签 中 包含 CSS。 为 了 确保 设备 正确 显示 新 的 响应 式 CSS ， 
还 应 该 在 <headq> 元 素 中 添加 以 下 <meta> 标 签 ; 


<meta name="viewport" content="width=device-width,initial-scale=1"> 


这 个 <meta> 标 签 告诉 浏览 器 两 件 事 : 设备 应 该 以 与 设备 屏幕 相同 的 宽度 泻 染 页 面 ， 并 且 页 
面 的 初始 比例 应 该 是 100%。 你 可 以 指定 其 他 行为 , 例如 禁用 缩放 , 但 不 要 阻止 用 户 执行 此 操作 ; 
这 可 能 会 为 有 视力 问题 的 用 户 访 问 造 成 困难 。 

有 了 这 个 样板 文件 ， 你 可 以 以 极 简 主义 的 心态 ， 实 现 啊 应 式 Web 设计 项 目 。 要 记 住 : 你 的 
用 户 是 最 重要 的 。 开 发 视觉 丰富 和 吸引 人 的 网 站 不 是 犯罪 , 但 开发 缓慢 的 网 站 就 是 了 ! 从 极 简 开 
设计 ， 是 确保 即使 网 站 复杂 也 能 尽快 加 载 的 最 好 方法 。 


3.2.2 ”Mobilegeddon 算 法 


2015 年 2 月 ， Google 宣布 改变 搜索 结果 排名 方法 ,两 个 月 后 生效 。 这 一 变化 使 得 被 视 为 移动 
友好 的 网 站 在 移动 端 搜索 结果 中 更 占 优势 。 
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激励 开发 者 和 内 容 创 造 者 提供 良好 的 移动 体验 是 有 意义 的 。 对 许多 人 来 说 , Google 是 访问 内 
容 的 主要 门户 。Google 将 用 户 体验 放 在 首位 , 并 通过 强调 内 容 在 移动 设备 上 传递 方式 的 重要 性 体 
现 了 这 一 点 。 这 就 要 求 开 发 者 为 每 个 人 提供 这 种 体验 。 


3.2.3 ”使 用 Google 的 移动 友好 指南 


Google 对 移动 友好 网 站 的 指导 很 简单 。 当 Google 查看 你 的 网 站 时 ， 它 会 寻找 两 个 表明 移动 
用 户 体验 良好 的 指标 。 下 面 在 http://jlwagner.net/webopt/ch03-test-site 上 打开 我 个 人 网 站 的 一 个 版 
本 ， 看 看 哪些 特性 在 移动 友好 型 网 站 中 很 重要 。 
口 正确 配置 viewport 属性 一 一 如 前 所 述 , 浏览 器 使 用 <meta> viewport 标签 调整 设备 屏幕 的 
内 容 大 小 。 图 3-12 显示 了 使 用 这 个 标签 前 后 ， 我 的 网 站 在 移动 设备 上 的 效果 。 


jeremy Wagner 


一 Professiona| Web Developer 
Saoinf Pau MN 


LinkedIn Twitter (Efile Email 


Hey There! 


l'm Jeremy Wagner and |'m a web developer in 
The Twin Cities specializing in front end 


Hey ‘There! development. That means | care about the parts of 


the web that concern appearances and usability. 


|'m Jeremy Wagner 

The Twin Cities specid Some of WhatIKnow: 
development. That nd| .hrvts 

of the web that concd .csss 


usability. » JavaScript 
。 Grunt 


不 带 <meta> viewport 标 签 带 有 <meta> viewport 标 签 
图 3-12 移动 设备 上 的 响应 式 网 站 ,不 带 <meta> viewport 标 签 ( 左 ) 和 带 上 此 标签 ( 右 ) 


的 对 比 。 即 使 图 中 站 点 是 一 个 移动 优先 的 响应 式 网 站 ,但 如 果 没 有 这 个 关键 的 标签 ， 
它 将 无 法 在 适当 的 临界 点 显示 ， 用 户 将 不 得 不 缩小 画面 以 查看 整个 网 站 


口 响应 性 一 一 网 站 需要 在 更 改 时 响应 视 口 的 大 小 。 用 户 使 用 垂直 滚动 没 问 题 ， 但 水 平 滚动 
通常 是 一 种 糟糕 的 用 户 体验 。Google 通过 水 平 滚动 检查 内 容 是 否 适 合 设备 屏幕 。 尽 管 出 
于 性 能 方面 的 考虑 ， 你 应 该 尝试 使 网 站 以 移动 优先 的 方式 响应 ， 但 使 用 任何 响应 式 设计 
方法 都 好 过 不 使 用 。 如 果 打 开 我 的 个 人 网 站 时 调整 浏览 器 窗口 的 大 小 ， 可 以 看 到 它 会 适 
应 窗口 。 
Google 在 确定 移动 友好 性 时 , 还 会 检查 其 他 事项 , 比如 清晰 的 字体 大 小 和 可 点 击 目标 的 接近 
程度 。 但 总 的 来 说 ， 上 述 两 个 标准 是 任何 具有 良好 移动 用 户 体验 的 网 站 的 基本 特性 。 
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3.2.4 ”验证 网 站 的 移动 友好 性 


Google 在 宣布 这 一 消息 后 , 准确 预料 到 企业 将 希望 评估 其 网 站 的 移动 友好 状态 。 为 了 帮助 网 
站 所 有 者 ,Google 开发 了 移动 友好 测试 工具 。 如 图 3-13 所 示 , 此 工具 提示 用 户 输入 要 分 析 的 URL。 
下 面 使 用 我 的 个 人 网 站 ， 看 看 如 何 使 用 这 个 工具 并 解释 其 输出 。 


Mobile-Friendly Test 6 


http://jeremywagner.me/ 


Awesomel 
This page is mobile-friendly. 


How Googlebot sees this page 


NAA Te lal 
— Professional Web Developer 一 
Saint Paul, MN 


Hey There! 


图 3-13 ”Google 的 移动 友好 测试 工具 在 检查 网 站 性 能 后 显示 的 结果 页 面 


对 网 站 进行 分 析 之 后 ,可 以 看 到 它 通 过 了 移动 友好 测试 , 并 显示 了 一 条 成 功 消息 。 对 于 不 适 
合 移动 端的 站 点 ,该 工具 将 返回 站 点 未 通过 测试 的 原因 列表 ,以 及 纠正 问题 的 步 又。 如 果 你 的 网 
站 不 适合 移动 端 ， 下 一 步 将 是 向 网 站 添加 <meta> viewport 标签， 并 使 网 站 能 够 响应 所 有 设备 。 

在 下 一 节 ， 你 将 看 到 如 何 对 CSS 进行 性 能 优化 ， 以 避免 可 能 导致 页 面 加 载 延 迟 的 常见 问题 ， 
从 而 改进 网 页 泻 染 。 


3.3 对 CSS 进行 性 能 调整 

除了 编写 简洁 和 移动 优先 的 响应 式 CSS 之 外 ， 还 必须 尽 可 能 优化 CSS 的 性 能 ， 使 用 户 获 得 
快速 而 流畅 的 体验 。 要 实现 这 一 点 ， 首 先 要 应 用 一 套 加 快 加 载 和 演 染 速度 的 技术 。 
3.3.1 避免 使 用 eimport 声 明 


你 可 能 见 过 eimport 指令 在 CSS 中 的 使 用 。 应 该 避免 这 种 做 法 ， 因 为 eimport 指令 与 
<1Link> 标 签 不 同 ， 在 下 载 整个 样式 表 之 前 ， 不 会 处 理 样式 表 中 的 eimport 指令 。 这 种 行为 会 导 
致 网 页 的 总 加 载 时 间 延 迟 。 
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3.3.2 eeimpoxtrt 串 行 请 求 


面向 性 能 的 网 站 的 目标 之 一 是 尽 可 能 多 地 并 行 化 HITP 请 求 。 并 行 请 求 是 在 同一 时 间 (或 接 
近 同 一 时 间 ) 发 出 的 请 求 。 

串 行 请 求 则 相反 ， 一 个 接 一 个 地 发 生 。 在 外 部 CSS 文件 中 使 用 时 ，eimport 串 行 请 求 ， 如 
图 3-14 所 示 。 


0s 0.5s 1.0s 1.5s 
S 
1. 请 求 styles.css 2. 在 style.css 下 载 完 成 后 ， 发 现 一 个 
1 @import 指 令 请 求 了 fonts.css 
styles.css 
| 3. 请 求 fonts.css 
i | EF 


fonts.css 

图 3-14 ”由 于 styles.css 中 的 eimport 指令 请 求 了 fonts.css， 两 个 样式 表 会 串 行 下 载 

当 @import 用 于 从 外 部 样式 表 中 加 载 CSS 文件 时 ， 必 须 先 加 载 对 初始 样式 表 的 请 求 ， 然 后 
浏览 器 才能 在 其 中 发 现 @import 指令 。 在 图 3-14 对 应 的 示例 代码 中 ，styles.css 包含 以 下 行 : 

@import url("fonts.css"); 

结果 导致 了 一 个 粮 炎 的 性 能 模式 : 一 个 接 一 个 地 惠 行 请 求 。 这 会 增加 页 面 的 总 体 加 载 和 党 染 
时 间 。 理 想 情况 下 ， 应 该 尽 可 能 多 地 打包 相同 类 型 的 文件 。 但 你 的 网 站 中 包含 的 一 些 CSS 可 能 
来 自 第 三 方 ， 打 包 不 可 行 。 此 时 应 该 依赖 HTML <1link> 标 签 ， 而 不 是 使 用 eimport。 


3.3.3 <link> 并 行 请 求 


HTML <1ink> 标 签 是 加 载 CSS 的 最 佳 原生 方法 。 它 不 像 @import 那样 串 行 加 载 请 求 ， 而 是 
并 行 加 载 请 求 。 扫 描 HTML 文档 后 ， 将 加 载 在 文档 中 找到 的 所 有 <1ink> 标 签 ， 如 图 3-15 所 示 。 


0s 0.5s 1.0s 
GET /Css/atyles, css a 
styles.css 
, GET /css/fonts.css ,| 0 
fonts.css 


图 3-15 使 用 <1ink> 标 答对 样式 表 发 出 两 个 请 求 。 浏 览 器 在 下 载 HTML 后 找到 
<link> 标 签 ， 并 同时 执行 这 两 个 请 求 
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<1Link> 标 签 在 下 载 HIML 文件 后 就 能 发 现 引用 ,这 与 CSS 文 件 中 eimport 指令 的 行为 不 同 ， 


后 者 只 有 在 下 载 样式 表 后 才能 发 现 对 外 部 文件 的 引用 。 


从 技术 上 讲 ， 你 可 以 在 HTML <style> 标 签 中 使 用 @import 而 不 会 影响 性 能 ， 但 是 将 此 方 
法 与 <1ink> 标 签 混合 使 用 ， 或 者 在 CSS 文件 中 使 用 aimport ， 将 导致 串 行 请 求 。 在 实践 中 ， 最 
好 坚持 使 用 <1ink> 标 签 ， 因 为 它 的 行为 是 可 预测 的 ， 并 且 将 把 CSS 导入 HTML 的 任务 降级 。 


LESS/SASS 文件 中 @import 的 含义 


在 LESS/SASS 中 , @import 有 不 同 的 功能 。 在 这 些 语言 中 ，Q@import 由 编译 器 读 取 并 用 
于 打包 LESS/SASS 文件 。 这样 你 就 可 以 在 开发 期 间 模 块 化 样式 , 并 在 编译 为 CSS 时 进行 打包 。 


本 节 中 讨论 的 行为 是 关于 在 常规 CSS 中 使 用 的 eimport。 


3.3.4 在 <head> 中 放置 CSS 


你 应 该 尽早 在 文档 中 放置 对 CSS 的 引用 ,最早 可 以 加 载 CSS 的 位 置 


是 <nheadq> 标 签 。 这 样 做 


可 以 缓解 两 个 问题 : 无 样式 内 容 的 闪烁 问题 ， 以 及 在 加 载 时 提高 页 面 的 泻 染 性 能 。 


3.3.5 ”防止 无 样式 内 容 闪 烁 


将 CSS 保留 在 HTML <head> 标 签 中 的 一 个 强 有 力 的 原因 是 , 它 可 以 防止 用 户 看 到 你 的 网 站 
处 于 无 样式 状态 。 这 种 现象 被 称 为 无 样式 内 容 闪 烁 《Flash of Unstyled Content )。 当 用 户 在 没有 应 
用 任何 CSS 的 情况 下 短暂 (但 很 明显 ) 看 到 你 的 网 站 时 ， 就 会 出 现 这 种 现象 。 图 3-16 显示 了 这 


种 紊乱 的 效果 ， 因 为 CSS 在 文档 中 加 载 得 太 晚 了 。 


74 ms 211 ms 


303 ms 


无 样式 内 容 短暂 可 见 。 网 站 样式 开始 演 染 


= 


图 3-16 Chrome 中 的 泻 染 时 间 线 ， 左 侧 显 示 了 无 样式 内 容 的 闪烁 效果 。 文 档 最 终 会 按 
预期 泻 染 ， 但 期 间 会 短暂 显示 无 样式 内 容 。 发 生 这 种 情况 是 因为 样式 表 的 


<1Link> 标 签 引用 放置 在 文档 末尾 


之 所 以 发 生 这 种 情况 ， 是 因为 浏览 顺从 上 到 下 读 取 HTML。 当 HTML 文档 被 读 取 时 ， 浏 览 
器 会 找到 对 外 部 资源 的 引用 。 在 CSS 中 ,浏览 器 的 演 染 速度 足够 快 ， 所 以 浏览 器 有 机 会 在 加 载 


外 部 CSS 之 前 泻 染 无 样式 页 面 。 
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缓解 这 个 问题 很 容易 : 通过 在 HTML 的 <head> 元 素 中 使 用 <1ink> 标 签 加 载 样 式 表 , 可 以 完 
全 避免 这 个 问题 。 


3.3.6 ”提高 泻 染 速度 


将 CSS 放 在 HTML 的 <heaq> 标 签 中 , 不 仅 可 以 防止 无 样式 内 容 出 现 , 还 可 以 加 快 网 站 在 初 
始 页 面 加 载 时 的 泻 染 速度 。 如 果 样 式 表 稍 后 才 包 含 在 文档 中 ， 浏 览 器 必须 比 在 <nead> 中 加 载 样 
式 表 时 做 更 多 工作 ， 因 为 它 必须 重新 泻 染 和 绘制 整个 DOM 。 
为 了 测试 这 一 点 ， 我 把 我 的 个 人 网 站 下 载 到 我 的 机 器 上 ， 在 Chrome 中 打开 ， 然后 使 用 DSL 
节 流 配置 。 然 后 ， 我 在 文档 的 <head> 标 签 中 引入 <1link> 样 式 表 ， 运 行 了 10 次 测试 ， 之 后 使 用 
页 脚 中 的 相同 样式 又 运行 了 10 次 测试 。 我 在 Chrome 的 Performance 面板 中 捕获 了 泻 染 摘要 ， 并 
对 结果 进行 了 平均 计算 。 图 3-17 显示 了 每 个 场景 的 泻 染 和 绘制 时 间 。 
<head> 中 包含 的 CSS 的 泻 染 时 间 以 及 


HTML 文 档 末 尾 的 CSS 的 泻 染 时 间 
(数值 越 低 越 好 ) 


150 mas 王 国 演 染 
120 ms 上 | | 绘制 


90 ms cc 


这 染 时 间 


60 ms cc 


-加 = 


Mn <head> 中 的 CSS ”HTML 文档 末尾 的 CSS 
图 3-17 我 的 个 人 网 站 在 Chrome 中 加 载 时 的 泻 染 性 能 ， 样 式 分 别 放 在 
<headq> 中 和 文档 末尾 


因为 一 个 小 的 HTML 调整 ， 就 获得 了 巨大 的 回报 。 如 果 你 在 编写 网 站 时 在 <headq> 标 签 之 外 
看 到 <1 ink> 标 签 ， 请 将 它们 重新 放置 到 文档 的 <heaq> 标 签 中 。 


3.3.7 ”使 用 更 快 的 选择 器 

我 们 之 前 简化 了 客户 网 站 中 的 CSS 选择 器 。 这 不 仅 通过 移 除 多 余 内 容 节省 了 空间 ， 也 有 助 
于 加 快 泻 染 速度 。 为 了 查看 哪 种 选择 器 类 型 最 快 ， 我 编译 了 一 个 基准 测试 ， 对 它们 进行 了 比较 。 
下 面 介绍 这 个 基准 测试 。 
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3.3.8 构建 和 运行 基准 测试 


你 需要 一 种 合理 的 方法 来 判断 浏览 器 的 泻 当 性能。 我 创建 了 几 个 HTML 文件 ， 它 们 具有 相 
同 的 通用 标记 结构 和 样式 。 在 每 个 文件 中 , 我 使 用 不 同类 型 的 CSS 选择 器 设置 文档 样式 。 图 3-18 
显示 了 测试 标记 的 大 体 结构 。 


div.contentContainer 


重复 25 次 
图 3-18 ”HTML 测试 文档 的 结构 。 测 斌 标记 包含 在 div.contentcontainer 中 ,其 中 4 个 
<section> 元 素 4 列 并 排 , 每 列 包含 两 个 -ul> 元 素 和 51 个 <1i> 元 素 。 然 后 将 4 个 
<section> 元 素 的 块 重复 大 约 50 次 。 每 个 测试 文档 中 的 元 素 总 数 约 为 21 000 个 


在 图 3-18 中 ,可 以 看 到 测试 标记 数量 庞大 。 每 个 文档 都 包含 一 份 内 联 样式 表 , 样式 表 使 用 各 


种 选择 器 类 型 对 HTML 进行 样式 设置 。 尽 管 使 用 的 选择 器 类 型 不 同 ， 但 所 有 测试 结果 的 最 终 外 
观 都 相同 。 


查看 测试 
可 以 在 http:Wjlwagnernet/weboptch03-selectors/ 中 找到 并 查看 测试 代码 ， 打 开 控 制 台 执行 
bench () 函数 , 在 每 个 测试 页 运行 基准 测试 。 可 以 使 用 Performance 面板 获取 测试 活动 的 数据 。 
该 页 上 还 以 Microsoft Excel 格式 提供 了 所 有 测试 的 数据 。 


这 个 基准 测试 是 通过 一 个 JavaScript 水 数 完成 的 ， 该 函数 在 加 载 文 档 时 , 将 aiv.content- 
Container 元 素 的 innerHTML 保存 到 一 个 变量 中 。 使 用 setTimeout 链 式 调用 ， 该 元 素 的 内 容 将 
被 删除 并 重新 插入 100 次 。 文 档 刷 新 会 导致 大 量 泻 染 计算 。 这 个 活动 是 使 用 Chrome 的 Performance 
面板 记录 的 ， 并 且 记 录 了 泻 染 和 绘制 时 间 。 

这 个 过 程 在 8 个 场景 中 使 用 不 同 的 选择 器 分 别 重复 了 10 次 。 表 3-1 列 出 了 这 些 选 择 器 及 其 
使 用 方法 。 


表 3-1 测试 中 使 用 的 选择 器 类 型 及 其 在 测试 中 的 示例 


选择 器 类 型 测试 用 例 示 例 〈 目 标 元 素 <11>) 
标签 1i 

后 代 section ul 1i 

类 .listItem 

直接 子 元 素 section > ul > 1i 


过 度 定义 div.contentContainer section.column ul.list 1i.listIitem 
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( 续 ) 
选择 器 类 型 测试 用 例 示 例 〈 目 标 元 素 <1i>) 
兄弟 Da 
伪 类 li:nth-child(odd), li:nth-child(even) 
属性 [data-list-item] 


运行 测试 并 记录 结果 后 ， 下 面 对 结果 进行 检查 。 
3.3.9 检查 基准 测试 结果 


运行 测试 并 记录 结果 后 , 可 以 将 泻 染 和 绘制 结果 合并 为 一 张 图 。 我 本 来 计划 分 开 报告 这 两 种 
情况 ， 但 发 现 Chrome 在 所 有 测试 中 花费 的 重 绘 时 间 平 均 约 为 200 毫秒 ， 仅 占 总 时 间 的 1%~2%。 
泻 染 才 是 CPU 最 密集 的 ， 因 此 也 是 最 有 说 服 力 的 ， 如 图 3-19 所 示 。 


CSS 选 择 器 性 能 
(数值 越 低 越 好 ) 
标签 
后 代 
类 
Ey 关子 -元 
及 直接 子 元 素 
玲 
二 过 度 定义 
兄弟 
伪 类 
| | | | 
0s SSs 10s 15s 20s 
泻 染 和 绘制 的 合并 时 间 


图 3-19 在 Chrome 中 测试 CSS 选择 器 的 性 能 。 左 边 是 选择 器 类 型 ， 底 部 是 每 个 选择 
器 类 型 完成 测试 所 用 的 时 间 ( 秒 )。、 所 有 值 都 是 泻 染 和 绘制 过 程 的 总 和 


由 图 可 知 , 大 多 数 选择 器 类 型 的 总 体 性 能 相似 , 但 专用 的 选择 器 类 型 ( 如 兄弟 选择 器 、 伪 类 
选择 器 和 属性 选择 器 类 型 ) 性 能 开销 特别 高 。 
对 于 要 使 用 哪些 选择 器 类 型 ,这些 测试 应 该 被 视 为 一 个 宽松 的 指导 原则 , 但 是 实际 的 性 能 总 
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是 更 好 的 。 可 以 用 你 选择 的 开发 工具 包 分 析 网 站 的 性 能 ， 然 后 决定 如 何 改进 。 

ID 选择 器 (例如 #maincolumn ) 没有 进行 基准 测试 ; 具有 ID 的 元 素 在 实践 中 往往 很 少 ， 
为 它们 在 文档 中 是 唯一 的 ， 而 具有 类 的 元 素 可 以 重复 使 用 。 

我 们 要 继续 努力 提高 CSS 中 的 演 染 性 能 , 下 面 看 看 盒子 模型 布局 和 较 新 的 flexBox 布局 引擎 
之 间 的 性 能 差异 。 


3.3.10” 尽 可 能 使 用 flexbox 


多 年 来 ,在 Web 上 布局 内 容 , 指 的 是 组 合 浮动 元 素 .操作 CSS aisplay 属性 以 及 使 用 margin 
和 padding。 而 flexbox 是 一 个 新 的 CSS 布局 引擎 ， 可 用 于 现代 浏览 器 。flexbox 简化 了 页 面 上 
元 素 的 布局 。 它 自动 处 理 两 个 轴 上 的 间距 、 对 齐 和 补 齐 。 它 在 页 面 上 布局 元 素 时 更 具 鲁 棒 性 ， 而 
是 往往 比 传统 方法 执行 得 更 好 。 


3.3.11 ”对 比 盒子 模型 和 flexbox 样 式 


测试 flexbox 演 染 性 能 的 方法 与 之 前 测试 选择 器 演 染 性 能 类 似 。 有 两 个 样式 相同 的 测试 文档 ， 
它们 都 是 由 列表 项 组 成 的 四 列 图 库 。 第 一 个 文档 使 用 盒子 模型 布局 元 素 ， 第 二 个 文档 使 用 
flexbox。HTML 的 结构 是 一 个 单独 的 <ul> 元 素 ， 里 面包 含 3000 多 个 <11> 元 素 。 每 个 <11> 包 含 
一 个 <img> 元 素 和 一 个 <p> 元 素 。 基 准 测试 运行 10 次 ， 并 对 数据 取 平 均值 。 


查看 测试 
访问 http://jlwagner.net/webopt/ch03-box-model-vs-flexbox/ 查 看 测试 。 与 前 面 的 选择 器 测试 
一 样 ， 你 可 以 通过 在 控制 台 和 概要 活动 中 运行 bench () 函数 以 运行 基准 测试 ， 从 而 得 出 结论 。 


除了 列表 和 列表 项 元 素 的 样式 ， 其 他 CSS 是 相同 的 。 在 盒子 模型 版 本 中 ， 这 些 元 素 的 样式 
如 下 所 示 。 


代码 清单 3-7 ”盒子 模型 样式 
a tt 
margin: 0 auto; 
width: 100%; 
font-size: 0; 


} 


.itemt{ 
width: 24.25%; 
list-style: none; 
border: .0625rem solid #000; 
margin: 0 1% lrem 0; 
display: inline-block; 
vertical-align: top; 
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.item:nth-child(4n+4){ 
margin: 0 0 lrem; 


} 

这 是 典型 的 盒子 模型 样式 代码 。 使 用 margin 把 所 有 东西 都 完美 地 隔 开 。 使 用 一 个 :ntn- 
child 选择 器 ， 每 隔 三 个 元 素 删 除 边 距 ， 以 便 每 行 所 有 元 素 的 宽度 和 外 边 距 加 起 来 达到 100%。 
而 在 代码 清单 3-8 中 ， 元 素 使 用 flexbox 等 效 地 设置 样式 。 


代码 清单 3-8 ”flexbox 样式 ， 粗 体 文字 表示 flexbox 属性 


.listt{ 
display: flex; bs 
在 .1ist 元 素 上 
子 元 素 在 justify-content: space-between; | 二 en 
容器 中 完 flex-flow: row wrap; Se 
全 对 齐 margin: 0 auto; 
width: 100%; 子 元 素 在 必要 
} 时 拆 行 
.itemt{ 
flex-basis: 24.25%; 子 元 素 给 定 的 默认 
list-style: none; 宽度 是 24.25% 


border: .0625rem solid #000; 
margin: 0 0 lrem; 


} 

在 测试 中 ，flexbox 被 应 用 到 带 有 aisplay: flex; 规 则 的 .1ist 元 素 。 这 将 把 代码 中 的 每 
个 <1i> 变 成 一 个 flex 项。 使 用 flex-flow 属性 ， 可 以 告诉 浏览 器 将 项 目 排 成 一 行 ， 并 将 它们 转 
到 新 行 。 然 后 使 用 justify-content 属性 , 根据 space-between 值 , 设置 元 素 与 容器 边缘 的 
距离 。 最 后 ，flex-basis 属性 替换 了 盒子 模型 版 本 中 的 wiatn 属性 ， 并 指示 浏览 器 以 特定 宽 
度 泻 染 项 。 可 以 看 到 此 代码 没有 使 用 :nth 子 选择 器 来 每 隔 三 项 删除 一 次 右边 距 。 事 实 上 ,没有 
任何 子 项 应 用 了 右边 距 。flexbox 处 理 了 所 有 这 些 问题 。 


学 习 更 多 flexbox 内 容 
本 节 不 打算 详尽 介绍 flexbox， 而 是 介绍 它 可 以 提供 的 性 能 优势 。 想 要 快速 了 解 这 个 布局 
引擎 ， 请 查看 Chris Coyier 的 优秀 文章 :“A Complete Guide to Flexbox”。 


定义 好 测试 环境 后 ， 查 看 结果 ! 


3.3.12 ”检查 基准 测试 结果 

与 CSS 选择 器 测试 中 的 基准 类 似 ， 将 泻 染 和 绘制 图 形 合并 为 一 张 图 。 在 每 次 测试 中 ， 绘 制 
大 约 花 费 60 毫秒 的 时 间 ， 这 只 是 Chrome 整体 工作 的 一 小 部 分 。 测 试 在 每 个 演 染 模式 下 运行 10 
次 ， 然 后 对 结果 取 平 均值 ， 绘 图 如 图 3-20 所 示 。 
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12s 厂 


10s 广 


8s 王 


6Ss 王 


4s 上 


这 染 和 绘制 的 合并 时 间 


2s 上 


0s 


盒子 模型 flexbox 
图 3-20 ”基准 测试 结果 ， 左 侧 为 盒子 模型 布局 性 能 ， 右 侧 为 flexbox 布局 性 能 。 数 值 越 低 越 好 


由 图 3-20 可 知 ， 泻 染 内 容 时 ，fexbox 往往 是 性 能 更 优 的 解决 方案 。 更 好 的 消息 是 ， 它 在 没 
有 特定 于 浏览 器 厂商 前 缀 的 情况 下 获得 了 广泛 的 支持 。 当 与 浏览 器 厂商 前 级 一 起 使 用 时 ,支持 度 
有 增 无 减 。 如 果 你 的 网 站 上 还 没有 使 用 flexbox， 对 其 进行 改造 通常 相当 简单 。 

下 一 节 将 深入 讨论 CSS 过 渡 。 在 第 2 章 中 , 在 使 用 Chrome 演 染 分 析 器 时 简要 介绍 过 这 个 概 
念 ， 本 章 将 深入 研究 其 他 此 前 未 涉及 的 概念 。 


3.4 ”使 用 CSS 过 渡 


在 第 2 章 , 我 们 使 用 CSS 过 渡 修复 了 客户 网 站 上 的 一 个 janky 模 态 框 窗口 。 本 节 将 介绍 如 何 
使 用 CSS 过渡， 以 及 它 可 以 提供 的 好 处 。 


3.4.1 使 用 CSS 过 渡 


CSS 过 渡 对 于 包含 简单 线性 动画 ， 且 动画 要 求 不 多 的 网 站 来 说 是 不 二 之 选 。 这 个 原生 CSS 

特性 有 以 下 优点 。 

口 广泛 支持 一 一 与 过 去 不 同 ，CSS 过 渡 已 经 得 到 浏览 器 的 广泛 支持 。 所 有 最 新 的 浏览 器 都 
支持 它们 ， 大 多 数 较 旧 的 浏览 器 (如 Internet Explorer 10 及 更 高 版 本 ) 则 可 以 使 用 浏览 
厂商 前 缀 。 

口 回流 复杂 DOM 时 , CPU 的 使 用 效率 更 高 一 一 在 大 型 DOM 结构 中 使 用 CSS 过 渡 时 , CPU 
的 使 用 效率 更 高 。 这 是 由 于 在 密集 的 DOM 回流 过 程 中 减少 了 抖动 ， 并且 CSS 过 渡 不 会 
产生 脚本 开销 。 我 的 测试 表明 ，CPU 性 能 总 体 提高 了 22%。 

口 无 额外 开销 一 一 CSS 过渡 没有 开销 ， 因 为 它 随 浏览 器 一 起 提供 。 对 于 具有 简单 动画 需求 
的 网 站 来 说 ， 使 用 内 置 功能 而 不 是 将 JavaScript 库 的 开销 添加 到 页 面 中 ， 更 为 合理 。 
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要 体验 CSS 过 渡 ， 可 以 看 看 这 个 属性 的 一 个 简单 示例 。 导 航 到 http://jlwagner.net/webopt/ 
ch03-transition/， 你 将 看 到 一 个 带 有 蓝 色 方 框 的 页 面 。 将 鼠标 悬 停 在 这 个 方 框 上 ， 可 以 看 到 框 变 
成 一 个 圆 ， 如 图 3-21 所 示 。 


图 3-21 页 面 上 的 .box 元 素 在 border-radius 属性 上 应 用 过 渡 前 后 的 效果 


过 渡 效 果 是 通过 将 transition 属性 应 用 在 方 框 的 porder-radius 属性 上 实现 的 。 最 初 
方 框 没有 应 用 bordqer-raaqius， 介 是 悬 停 在 其 上 时 ，borqer-raaqius 值 变 为 S0%。 代 码 清 单 
3-9 是 驱动 这 种 效果 的 CSS。 


代码 清单 3-9 简单 的 CSS 悬 停 状 态 过 渡 
.boxt{ 
width: 128px; 
height: 128px; 


background: #00a; 过 渡 属 性 
transition: border-radius 2s ease-out; 

} 

.box:hovert{ 触发 过 渡 
border-radius: 50%; 


} 


应 用 这 上段 CSS, 当 用 户 悬 停 在 .box 上 时 ,transition 属性 将 .box 元 素 的 border-radius 
设置 为 50%， 持 续 时 间 为 两 秒 。 元 素 将 从 正方 形变 为 圆 形 ， 并 且 使 用 ease-out 时 间 函 数控 制 
速度 ， 得 到 一 个 平滑 的 动画 。 

通过 演示 这 个 属性 的 基本 用 例 ， 我 们 来 进一步 了 解 transition 属性 。 该 属性 本 身 是 简写 
属性 ， 可 通过 以 下 格式 同时 设置 多 个 CSS 属性 : 


transition: transition-property transition-duration transition-timing-function 
transition-delay 


这 个 简写 属性 代表 以 下 内 容 。 

DQ transition- 0 nl CSS 属性 。 值 可 以 是 任何 有 效 的 属性 ， 如 
color、border-radius 等 。 革 些 属性 无 法 设置 动画 ， 例 如 display 属性 。 
完成 过 渡 所 需 的 时 间 。 可 以 用 和 或 误 秒 表示 (例如 ，2 ss 


D transition-duration 


或 250ms )。 
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口 transition-timing-function 一 一 过 渡 期 使 用 的 缓 动 效果 ,可 以 使 用 预 设 ( 如 1inear 
或 ease ) 表示 ,也 可 以 使 用 steps 函数 分 段 ,或 者 通过 cubic-bezier 限 数 提供 更 细 
微 的 缓 动 行为 。 忽 略 此 选项 将 使 用 默认 的 ease 预 设 设置 过 渡 动 画 。 

过 渡 开 始 前 的 延迟 时 间 ( 以 秒 或 毫秒 为 单位 )。 如 果 不 需要 延迟 ， 


口 transition-dqelay 
则 忽略 此 项 。 
还 可 以 在 元 素 上 过 渡 多 个 属性 。 如 果 还 希望 过 渡 .box 元 素 的 宽度 和 高 度 , 则 可 以 向 transition 
属性 添加 更 多 内 容 : 
.boxt{ 
width: 64px; 
height: 64px; 


transition: width 2s ease-out, height 2s ease-out; 


} 
使 用 这 些 附 加 属性 ， 元 素 将 把 .box 元 素 的 宽度 和 高 度 属 性 过 渡 为 添加 到 该 元 素 悬 停 状态 的 
任何 新 的 宽度 和 高 度 值 。 

下 面 观察 CSS 过 渡 与 jQuery 驱动 的 动画 的 性 能 。 


3.4.2 ”观察 CSS 过 渡 性 能 


我 准备 了 一 个 动画 基准 测试 ,测试 CSS 过 渡 和 jQuery 驱动 动画 的 性 能 。 我 创建 了 两 个 相同 
的 HIML 文档 ， 每 个 文档 都 有 一 个 <ul> 元 素 ， 其 中 填充 了 128 个 列表 项 。 每 次 测试 中 ， 我 都 设 
置 列表 项 的 动画 ,使 其 从 5rem 的 宽度 和 高 度 增加 到 24rem。 在 第 一 个 测试 中 , 我 使 用 了 jQuery 
的 animate() 方 法 ; 在 第 二 个 测试 中 ， 我 使 用 了 CSS 过 渡 。 测 试 采用 这 种 结构 ， 以 便 引 起 大 量 
的 DOM 回流 。 我 使 用 Google Chrome 的 Performance 面板 测试 了 这 些 场 景 5 次 , 并 记录 了 每 次 运 
行 的 平均 内 存 使 用 率 、CPU 时 间 和 平均 帧 速率 。 表 3-2 显示 了 平均 结 


表 3-2 在 Google Chrome 中 ， 使 用 CSS 过 渡 与 jQuery animate() 方 法 的 基准 测试 结果 


过 渡 类 型 jQuery animate () CSS 过 渡 性 能 收益 
平均 内 存 使 用 5.10 MB 2.32 MB +54.51% 
CPU 时 间 2011.53 ms 1572.02 ms +22% 
平均 帧 速率 44.4 41.1 +8% 


这 种 场景 下 的 性 能 优势 是 显而易见 的 ， 但 并 非 所 有 情况 下 都 如 此 。 尽 管 CSS 过 渡 有 自己 的 
使 用 场景 , 并 且 可 以 在 无 额外 开销 的 情况 下 为 用 户 提高 动画 性 能 , 但 它们 只 在 简单 的 场景 以 及 简 
单 的 UI 效果 上 效果 最 好 ， 例 如 甚 停 和 非 canvas 导航 过 渡 。 你 正在 构建 的 网 站 可 能 需要 更 复杂 的 
动画 行为 ， 此 时 ， 使 用 JavaScript 解决 方案 requestAnimationFrame () 方 法 会 获得 更 好 的 
性 能 ， 我 们 将 在 第 8 章 中 介绍 该 方法 。 

但 是 ， 不 要 因此 而 不 使 用 CSS 过 渡 ， 因 为 它 的 性 能 很 高 。CSS 过 渡 用 于 简单 目的 时 表现 良 
好 ， 并 且 不 需要 用 户 下 载 额外 的 数据 。 如 果 你 的 需求 很 简单 ， 并 且 可 以 使 用 CSS 实现 高 性 能 过 
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渡 ， 而 不 是 通过 JavaScript 动画 库 向 页 面 添 加 更 多 负载 ， 那 就 请 使 用 CSS 过 渡 吧 。 
下 一 节 将 介绍 如 何 告知 浏览 器 你 打算 使 用 CSS 过 渡 设 置 动 画 的 元 素 ， 以 及 这 样 做 的 好 处 。 


3.4.3 使 用 wi11-change 属 性 优化 过 渡 


浏览 器 第 一 次 执行 CSS 过 渡 时 ， 它 必须 确定 该 元 素 的 哪些 方面 将 发 生 更 改 。 这 种 情况 发 生 
时 , 浏览 器 必须 在 第 一 次 执行 过 渡 之 前 做 一 些 工 作 。 尽 管 这 本 身 并 不 一 定 是 次 优 的 , 但 可 能 对 演 
染 性 能 产生 负面 影响 。 

为 了 解决 这 个 问题 ， 开 发 者 发 现 了 一 个 CSS hack， 可 以 使 用 translatez 属性 将 目标 元 素 
提升 到 一 个 新 的 层 登 上 下 文 。 当 一 个 元 素 在 浏览 需 中 被 赋予 这 种 新 的 状态 时 , 它 可 以 以 迁 回 的 方 
式 暗 示 浏 览 器 : 如 果 这 个 元 素 是 用 CSS 设置 动画 的 ， 那 么 这 个 元 素 的 泻 染 应 该 由 GPU 处 理 。 

然而 ， 和 任何 有 用 的 hack 一 样 ，translatez 现在 过 时 了 ， 因 为 有 了 新 的 will-change 
属性 。translatez hack 的 问题 是 ， 它 告诉 浏览 器 :“ 这 里 会 发 生 一 些 事情 ， 但 我 不 能 告诉 你 是 
什么 。” 而 使 用 wi1l1-change 属性 ， 你 可 以 通知 浏览 絮 元 素 的 哪些 方面 会 发 生变 化 。 

可 以 将 will-change 这 个 属性 视 为 对 transition 属性 的 补充 。 还 记得 使 用 transition 
可 以 指定 目标 元 素 的 哪些 样式 属性 将 更 改 吗 ? 例如 color、width 和 height。will-change 
属性 的 语法 也 是 类 似 的 : 


will-change: property, [property]... 


will-change 接受 任何 有 效 的 CSS 属性 ,或 以 逗号 分 隔 的 属性 列表 ， 用 来 设置 动画 。 但 是 
要 小 心 : 误 用 它 会 影响 设备 上 资源 的 分 配方 式 。 例 如 ， 你 可 能 会 尝试 在 所 有 DOM 元 素 上 激活 此 
属性 ， 以 优化 页 面 上 的 所 有 过 渡 ， 如 下 所 示 : 


大 
/7 


*;:before, 
*;, :aftert{ 
will-change: all; 

} 

别 这 样 做 , 这 可 能 会 对 页 面 性 能 产生 负面 影响 , 特别 是 在 分 层 很 多 和 复杂 的 页 面 中 。 如 果 你 
使 用 了 它 ， 那 就 是 让 浏览 器 做 好 准备 ， 以 防 页 面 上 的 每 个 元 素 都 发 生 更 改 。 这 显然 对 性 能 不 利 。 
will-change 属性 是 一 个 提示 ; 与 所 有 提示 一 样 ， 应 该 谨慎 使 用 它 。 

使 用 wil1-change 时 要 考虑 的 另 一 件 事 是 : 需要 给 属性 足够 的 时 间 工 作 。 以 下 是 wi1l1- 
change 属性 的 不 良 用 法 : 

#siteHeader a:hovert{ 


background-color: #0a0; 
will-change: background-color; 


} 


这 样 做 的 问题 是 ,浏览 器 没有 时 间 来 应 用 必要 的 优化 。 此 时 要 想 更 好 地 使 用 该 属性 ， 则 应 当 
将 其 应 用 于 父 元 素 的 :hover 状态 ， 以 便 浏览 器 可 以 预测 将 要 发 生 的 情况 : 
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#siteHeader:hover af 
will-change: background-color; 


} 


这 为 浏览 器 提供 了 足够 的 时 间 来 为 元 素 的 更 改 做 准备 ， 因 为 当 用 户 的 鼠标 进入 #siteHeader 
元 素 并 悬 停 在 链接 上 时 ， 其 中 的 所 有 a 元 素 都 将 在 #siteHeader 元 素 悬 停 事件 时 准备 好 。 

还 可 以 使 用 JavaScript 以 编程 方式 按 需 添加 wil11-change。 如 果 打 开 一 个 模 态 框 ， 其 中 的 
<button> 元 素 有 背景 色 变 换 ， 则 可 以 使 用 类 似 于 以 下 代码 的 内 容 : 


document .querySelector("#modal") .style.display = "block"; 
document .querySelector("#modal button") .style.willChange = "background-color"; 


关闭 模 态 框 后 ， 可 以 从 受 影 响 的 元 素 中 删除 will-change 属性 。 使 用 此 属性 很 难 ， 但 如 果 
你 很 坚定 ， 则 可 以 以 智能 方式 优化 元 素 上 的 过 渡 ， 而 不 会 影响 整个 页 面 性 能 。 关于 这 个 属性 , 需 
要 记 住 的 关键 一 点 是 ， 你 可 以 预测 元 素 的 潜在 更 改 ， 而 不 是 假设 它们 会 发 生 。 


3.5 ”小结 


我 们 在 本 章 学 习 了 以 下 内 容 。 

口 CSS 简写 属性 不 仅 方便 ， 而 且 通 过 减少 多 余 和 宛 长 的 规则 为 我 们 提供 了 一 种 减 小 样式 表 

大 小 的 方法 。 

口 使 用 CSS 浅 选 择 器 也 可 以 大 幅 减 小 样式 表 的 大 小 ， 同 时 使 代码 更 易于 维护 和 模块 化 。 

口 可 以 使 用 csscss 宛 余 检查 器 应 用 DRY 原则 ， 通 过 移 除 多 余 的 属性 ， 进 一 步 优 化 腔 肿 的 

CSS 文件 。 

口 基于 用 户 行为 数据 对 CSS 进行 分 割 ， 可 以 确保 用 户 第 一 次 访问 网 站 时 ， 不 会 下 载 他 们 可 

能 永远 看 不 到 的 页 面 模板 的 CSS。 

口 移动 优先 的 响应 式 Web 设计 很 重要 ， 从 极 简 主义 开始 设计 最 适用 于 创建 高 性 能 网 站 。 

口 移动 友好 型 网 站 是 影响 Google 搜索 排名 的 一 个 因素 。 通 过 确保 网 站 移动 友好 ， 可 以 避免 

对 网 站 页 面 搜索 排名 的 负面 影响 。 

口 避免 eimport 声明 ， 并 将 CSS 放 在 文档 <nead> 标 签 中 ,会 对 网 站 的 泻 染 和 加 载 速度 产 

生 积 极 影响 。 

口 使 用 高 效 的 CSS 选择 器 和 flexbox 布局 引擎 ， 可 以 提高 网 站 的 泻 染 速度 。 

口 使 用 CSS 过 渡 可 以 实现 高 性 能 的 简单 线性 动画 ， 并 且 不 会 给 最 终 用 户 带 来 实际 开销 ， 因 
为 用 CSS 过 渡 不 需要 引入 外 部 库 。 

口 使 用 wi11-change 属性 通知 浏览 器 元 素 的 状态 更 改 ,你 可 以 有 选择 地 提高 某 些 元 素 的 动 
画 性 能 , 但 前 提 是 要 采用 可 预测 的 智能 方式 。 尝 试用 wil1l-change 为 所 有 元 素 优化 动画 
不 仅 是 一 种 浪费 ， 而 且 对 性 能 有 潜在 危害 。 

第 4 章 将 介绍 关键 CSS, 这 是 一 种 提高 页 面 泻 染 性 能 的 技术 。 这 种 技术 可 以 加 快 首 屏 内 容 的 

泻 染 速度 ， 并 使 用 JavaScript 异步 加 载 其 余 页 面 样式 ， 从 而 使 用 户 感觉 页 面 加 载 速度 更 快 。 


理解 关键 CSS 


本 章 内 容 

口 理解 关键 CSS 及 其 解决 的 问题 

口 理解 关键 CSS 的 原理 

口 在 项 目 中 使 用 关键 CSS 

口 了 解 关 键 CSS 在 实现 前 后 的 收益 对 比 


我 们 已 经 学 习 了 一 些 CSS 优化 技术 ， 下 面 该 学 习 高 级 CSS 优化 任务 了 。 该 任务 通过 优先 泻 
染 首 屏 内 容 加 快 页 面 的 泻 染 速度 ， 这 种 技术 被 称 为 关键 CSS。 


4.1 关键 CSS 及 其 解决 的 问题 


关键 CSS 是 一 项 优化 任务 ， 它 通过 优先 加 载 “ 折 一 之 上 ”内 容 的 CSS， 重 新 思考 浏览 器 如 
何 加 载 CSS。 正确 执行 这 项 任务 后 ， 因 为 页 面 演 染 更 快 ， 用 户 会 感觉 页 面 加载 时 间 缩 短 了 。 但 是 
理解 关键 CSS 之 前 ,需要 理解 什么 是 折 垒 。 


4.1.1 “理解 折 垂 


谈 到 “ 折 又 ”这 个 词 ， 我 们 会 想到 纸 质 媒体 。 用 这 种 方式 思考 “ 折 又 ”是 合理 的 ， 因 为 这 正 
是 “ 折 闪 ”概念 的 起 源 。 印 刷 报纸 时 ， 最 重要 的 报道 会 印 在 头 版 顶部 。 这 种 内 容 策 略 确保 当 报 纸 
被 折 有 到 、 捆 绑 和 分 发 时 ， 人 们 依然 可 以 在 最 上 面 看 到 头条 新 闻 。 

设计 师 、 营 销 人 员 和 内 容 策略 师长 期 以 来 一 直 强 调 要 将 最 重要 的 内 容 放 在 折 双 之 上 , 而 开发 
人 员 的 任务 就 是 构建 满足 这 一 目标 的 网 站 。 不 过 不 同 的 是 ， 纸 质 页 面 上 的 折 县 总 是 静态 放置 的 。 
当 一 个 设计 呈现 在 纸 上 后 ， 内 容 适应 媒介 的 工作 就 完成 了 。 而 网 站 页 面 折 著 时 , 设计 师 需 要 随 之 
适 配 。 

Web 是 一 种 截然 不 同 的 媒介 。 折 丢 的 位 置 取决 于 设备 的 分 辩 率 、 方 向 ， 以 及 浏览 需 窗 口 的 大 
小 ， 如 图 4-1 所 示 。 
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平板 计算 机 笔记 本 计算 机 /台式 机 


图 4-1 一 系列 设备 上 的 折叠 之 上 /下 内 容 。 折 又 之 上 的 内 容 从 网 站 顶部 开始 到 屏幕 
底部 结束 。 浏 览 器 视图 之 外 的 任何 内 容 都 在 折叠 之 下 

了 解 “ 折 秋 ”在 用 户 屏幕 上 的 位 置 后 ,我 们 应 当 尽 可 能 地 预测 用 户 屏幕 的 大 小 。 了 解 常 见 的 
设备 分 辩 率 即 可 知道 如 何 决定 。 

为 什么 了 解 这 一 点 很 重要 呢 ? 因为 关键 CSS 技术 根据 折 对 的 上 下 方 这 一 概念 ,将 CSS 分 为 
两 类 。 
口 关键 CSS， 即 折 又 之 上 的 内 容 一 一 这 些 是 用 户 会 立即 看 到 的 内 容 样 式 ， 需 要 尽快 加 载 。 
口 非 关键 CSS， 即 折 双 之 下 的 内 容 一 一 这 些 是 用 户 开 始 向 下 滚动 页 面 之 前 看 不 到 的 内 容 样 

式 。 这 种 CSS 也 应 该 尽快 加 载 ， 但 不 能 在 关键 CSS 之 前 加 载 。” 

现在 你 已 经 知道 了 “ 折 共 ”的 位 置 ， 以 及 如 何 根据 这 个 概念 对 CSS 进行 分 类 ， 下 面 可 以 开 
始 了 解 传统 CSS 传输 的 局 限 性 了 。 接 下 来 我 会 快速 讲解 当下 载 和 解析 样式 表 时 ， 浏 览 絮 演 染 是 
如 何 阻塞 的 。 


4.1.2 ”理解 泻 染 阻塞 


泻 染 阻塞 指 的 是 阻止 浏览 器 将 内 容 绘制 到 屏幕 的 任何 活动 。 这 常常 被 认为 是 Web 中 不 可 避 
免 的 事实 。 但 随 着 浏览 器 和 前 端 开 发 技术 的 成 熟 ， 这 种 不 受 欢迎 的 行为 渐渐 可 以 避免 。 

对 于 CSS， 浑 染 阻 塞 的 初衷 是 好 的 。 没 有 它 ， 无 样式 的 内 容 就 会 闪烁， 在 应 用 CSS 之 前 ， 
我 们 会 短暂 看 到 一 个 未 样式 化 的 页 面 。 但 是 ， 如 果 让 泻 染 阻塞 持续 太 长 时 间 , 则 会 延迟 网 站 内 容 
在 屏幕 上 的 显示 。 重 要 的 是 要 知道 泻 染 阻塞 的 时 间 ， 而 且 用 户 不 会 等 待 太 久 , 因此 应 当 尽 量 减 少 
泻 染 阻塞 。 

根据 CSS 在 文档 中 的 位 置 和 加 载 方法 ， 泻 染 阻塞 的 程度 会 有 所 不 同 。 使 用 eimport 指令 或 
<1ink> 标 签 加 载 外 部 CSS 时 ， 会 发 生 泻 染 阻塞 。 我 们 在 第 3 章 学 习 了 eimport 如 何 延迟 泻 染 ， 
并 且 了 解 到 最 好 使 用 <1ink> 标 签 。 但 事实 是 , 尽管 <1ink> 标 签 是 加 载 CSS 的 好 方法 , 但 它 也 会 
阻塞 浑 染 。 


@ 为 了 方便 理解 ， 以 下 将 “ 折 蚕 之 上 内 容 ” 称 为 “ 首 屏 内 容 ”",“ 折 秋之 下 内 容 ” 称 为 “ 首 屏 以 外 的 内 容 ”。 
一 一 译 者 注 
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要 查看 实际 的 泻 染 阻塞 , 请 打开 第 1 章 中 的 科 伊 尔 设备 维修 网 站 。 当 网 站 加 载 时 , 在 Chrome 
的 Performance 面板 中 捕获 活动 (参见 第 2 章 ), 在 分 析 器 填充 数据 后 , 转 到 窗口 底部 , 点 击 Event 
Log 选项 卡 ， 并 租 选 出 除 绘制 事件 之 外 的 所 有 事件 。 如 果 你 对 “开始 时 间 ”( Start Time ) 列 进行 
升序 排序 ， 将 在 页 面 上 看 到 第 一 次 绘制 事件 的 时 间 ， 如 图 4-2 所 示 。 


Summary Bottom-Up CallTree EventLog a . 
,一 通过 绘制 事 件 过 沪 
All 辣 国 Loading 国 Scripting 国 Rendering( 国 Painting 

Start Time a Self Time Total Time Activity 

863.2ms 0.8 ms 0.8 ms Paint 

864.0 ms 0.3 ms 0.3 ms Paint 

yy 二 
865.3 ms 0.2 ms 0.2 ms Composite Layers 首次 绘 制 时 间 


图 4-2 ” Chrome 的 Performance 面板 显示 文档 的 第 一 个 绘制 事件 发 生 。 可 以 在 

Event Log 选项 卡 过 滤 除 绘制 事件 以 外 的 其 他 事件 ， 进 而 找到 该 事件 

等 竺 大约 860 毫秒 ,文档 才 开始 绘制 ， 等 待 时 间 有 点 长 。 那 怎么 解决 这 个 问题 呢 ? 首先 ， 你 

可 以 将 网 站 的 CSS 直接 内 联 到 index.html 中 的 <style> 标 签 。 这 可 以 减少 内 容 开 始 泻 染 前 所 需 的 
时 间 ， 如 图 4-3 所 示 。 


Summary Bottom-Up CallTree EventLog 


All 辣 国 Loading 国 Scripting 国 Rendering 七 Painting 
Start Time A | Self Time Total Time Activity 
501.5ms 0.6 ms 0.6 ms Paint ee 
502.2 ms 0.2 ms 0.2 ms Paint 和 油 记 总 
503.2 ms 1.0 ms 1.0 ms Composite Layers 改进 后 的 首次 
绘制 时 间 
图 4-3 ”将 网 站 的 CSS 内 容 内 联 到 HTML 后 ，Chrome 的 Performance 面板 显示 绘制 
时 间 的 改进 


这 种 方法 有 利 有 弊 ， 问 题 是 它 只 在 单 页 网 站 上 工作 ， 在 这 些 网 站 上 去 除 单独 的 CSS 文件 是 
有 意义 的 。 而 在 更 大 、 更 复杂 的 网 站 上 ， 这 个 解决 方案 还 不 足以 让 人 信服 。 


内 联 和 HTTP/2 

虽然 内 联 对 于 HTTP/1 服务 器 端 和 客户 端 是 一 种 合适 的 实践 ， 但 它 不 应 该 用 于 HTTP/2 服 

务 器 。 这 个 功能 可 以 通过 使 用 HTTP/2 的 服务 器 推送 特性 来 实现 ， 同 时 保持 可 缓存 性 。 要 了 解 
有 关 服 务 器 推送 和 HTTP/2 的 更 多 信息 ， 请 参阅 第 11 章 。 


4.2 关键 CSS 的 原理 
关键 CSS 将 样式 分 为 两 类 : 首 屏 样式 和 页 面 其 余部 分 的 样式 。 本 节 将 学 习 如 何 分 别 如 载 每 
个 样式 。 
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4.2.1 加 载 首 屏 样式 


我 们 之 前 讨论 了 使 用 <l ink> 标 签 时 泻 染 阻塞 的 问题 。 如 图 44 所 示 , 通过 将 CSS 内 联 到 <style> 
标签 ， 可 以 解决 这 个 问题 。 


首 屏 内 容 内 联 样式 


‘style> 
header{ 
max-—width: 64rem; 
width: 100%; 


} 
‘</style> 


图 4-4 为首 屏 内 容 加 载 的 内 联 样式 。 首 屏 内 容 的 CSS 被 内 联 到 HTML 中 ， 以 便 更 快 
地 解析 ， 从 而 缩短 首次 绘制 时 间 
如 果 你 已 经 将 CSS 从 科 伊 尔 设备 维修 网 站 内 联 到 上 一 节 的 HTML 中 , 那么 恭喜 你 ， 你 已 经 
完成 了 将 关键 CSS 技术 用 于 更 复杂 的 网 站 所 需 的 一 半 工 作 。 
内 联 CSS 之 所 以 如 此 有 效 ， 是 因为 浏览 器 不 必 等 待 太 久 。 浏 览 器 加 载 页 面 的 HTML 时 将 解 
析 文 档 ， 并 找到 指向 其 他 资源 的 URL。 如 果 样 式 是 通过 <1ink> 标 签 加 载 的 ， 那么 在 浏览 右 必 须 
等 待 CSS 时 ， 演 染 就 会 被 阻塞。 但 是 当 样 式 内 联 到 HTML 中 时 ， 用 户 只 需要 等 待 加 载 HTML 的 
过 程 ， 随 后 浏览 器 就 能 解析 CSS， 页 面 就 能 演 染 。 
美中不足 的 是 : 当 你 以 这 种 方式 加 载 一 个 网 站 的 所 有 CSS 时 ， 就 会 失去 其 可 移植 性 。 最 后 ， 
每 次 加 载 页 面 时 都 会 复制 CSS， 这 意味 着 以 后 每 次 加 载 页 面 时 都 会 出 现 无 法 有 效 缓存 的 情况 。 
其 实 ， 关 键 CSS 在 一 定 程度 上 已 经 解释 了 这 一 点 。 只 将 首 屏 样式 存储 到 <style> 标 签 中 ， 
并 将 其 内 联 到 HIML， 剩 下 的 样式 将 从 外 部 文件 加 载 。 
这 是 否 会 使 一 些 CSS 在 随后 的 页 面 加载 中 变 得 多 余 ?” 确实 ， 但 只 涉及 网 站 首 屏 的 一 小 部 分 
内 容 。 首 次 绘制 的 时 间 减 少将 抵消 这 种 宛 余 的 损害 。 即 使 使 用 的 是 CSS 框架 ， 你 仍然 可 以 内 联 
用 于 特定 页 面 的 框架 部 分 。 当 浏览 器 开始 更 快 地 绘制 页 面 时 ,就 会 达到 预期 的 效果 ,并 且 用 户 不 
会 注意 到 少量 元 余 CSS 对 性 能 的 损害 。 


4.2.2 ”加 载 首 屏 以 外 内 容 的 样式 


关键 CSS 的 男 一 半 是 加 载 首 屏 以 外 内 容 的 样式 。 这 些 样 式 是 使 用 <1ink> 标 签 加 载 的 ,但 是 
你 不 是 以 常规 的 方式 使 用 它 ， 而 是 要 使 用 preloag 资源 提示 加 载 CSS， 同 时 不 会 阻塞 泻 染 。 你 
还 将 加 载 一 个 脚本 ,该 脚本 可 以 为 不 支持 它 的 浏览 占 polyfill preload 功能 。 

以 上 操作 看 起 来 有 点 烦琐 ， 但 它 立竿见影 ， 当 与 首 屏 内 容 的 内 联 CSS 结合 时 ， 尤 其 如 此 。 
浏览 锅 立 即 泻 染 首 屏 内 容 的 CSS， 而 preload 资源 提示 会 在 后 台 获 取 页 面 其 余部 分 的 样式 。 
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preloaqd 资源 提示 


想 知 道 更 多 关于 资源 提示 的 内 容 ? 
是 有 助 于 你 微调 资源 加 载 的 提示 之 一 ， 而 不 只 是 关键 CSS。 要 了 解 


有 关 资 源 提示 的 更 多 信息 ， 请 参阅 第 10 章 。 


你 可 能 会 说 :“JavaScript 也 会 阻塞 泻 染 !” 对 于 外 部 加 载 的 脚本 确实 如 此 。 不 过 在 本 例 中 ， 
你 可 以 内 联 一 个 由 Filament Group 开发 的 1.5 KB 小 脚本 1oadcss 来 完成 这 项 工作 。 这 样 就 可 以 
在 所 有 浏览 器 中 使 用 同一 种 preload 语法 来 加 载 首 屏 以 外 内 容 的 CSS， 如 图 4-5 所 示 。 


首 屏 以 外 内 容 异 步 加 载 样式 


<link rel="preload" href="css/styles,.min,.css" 


as="style" onload="this.rel='stylesheet'"> 


图 


4-5 ” preload 资源 提示 加 载 首 屏 以 外 内 容 的 外 部 CSS。 这 种 加 载 外 部 样式 表 的 
方式 不 会 阻塞 泻 染 。CSS 完成 加 载 时 ，onloadq 事件 会 触发 ,并 修改 <1ink> 
标签 的 rel 值 使 样式 演 染 


这 种 方法 很 巧妙 。 它 不 像 你 通常 做 的 那样 使 用 <1ink> 标 签 加 载 CSS, 而 是 使 用 preload 提 
示 ， 如 下 所 示 : 


<link rel="preload" href="css/styles.min.css" as="style" 


onload= 


"this.rel='stylesheet'"> 


这 样 可 以 在 不 阻塞 泻 染 的 情况 下 加 载 CSS。CSS 完成 下 载 时 , 标签 上 的 onloag 事件 处 理 程 


序 将 被 触发 。 


下 载 完 成 后 ，rel 属性 的 值 就 会 从 preload 转换 为 stylesheet。 这 将 <l1ink> 标 


签 从 资源 提示 更 改 为 普通 CSS 引入 , 后 者 将 CSS 应 用 于 首 屏 以 外 的 内 容 。JavaScript polyfill 作为 
久 底 ， 以 防 浏览 器 不 支持 preloagd 提示 。 就 是 这 么 简单 ! 

现在 你 已 经 掌握 了 这 两 种 分 别 用 于 折 双 上 /下 内 容 的 CSS 加 载 方法 ,下面 可 以 着 手 在 客户 的 
菜谱 网 站 上 实现 该 技术 。 


4.3 ”实现 关键 CSS 


下 面 学 习 如 何在 移动 优先 响应 式 菜谱 网 站 的 一 个 页 面 上 实现 关键 CSS。 以 下 步骤 将 引导 你 完 
成 网 站 所 需 工作 : 

(1) 设置 网 站 在 本 地 机 需 上 的 运行 环境 ; 

(2) 在 每 个 临界 点 中 识别 首 屏 CSS; 


(3) 将 首 
(4) 使 用 


屏 CSS 和 其 余 CSS 分 离 ， 并 将 首 屏 CSS 内 联 到 HTML ; 
preloagd 加 载 网 站 其 余 CSS， 使 其 不 会 阻塞 泻 染 。 
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4.3.1 配置 并 运行 菜谱 网 站 


要 完成 本 章 工 作 ， 你 需要 继续 使 用 git 、npm 和 node 来 下 载 和 运行 网 站 。 另 外 ， 你 会 用 到 
LESS， 这 是 一 个 流行 的 CSS 预 编译 右 。 


写 给 SASS 用 户 
我 知道 有 些 开发 者 可 能 更 喜欢 SASS 而 不 是 LESS， 但 是 为 了 清晰 起 见 ， 这 个 网 站 示例 使 
用 LESS, 而 不 是 试图 同时 迎合 这 两 个 预 编译 器 的 用 户 。 如 果 你 用 过 SASS, 对 于 LESS 代码 也 
会 感到 熟悉 。 即 使 你 从 未 使 用 过 CSS 预 编译 器 , 使 用 LESS 也 不 会 妨碍 你 的 进度 。 使 用 哪 一 款 
预 编译 器 对 于 本 章 目 标 来 说 都 无 关 紧 要 。 


1. 下 载 并 运行 菜谱 网 站 

你 有 个 朋友 在 运营 一 个 菜谱 网 站 , 他 向 你 咨询 是 否 可 以 让 网 站 演 染 得 更 快 。 菜谱 网 站 领域 竞 
争 激烈 ， 因 此 速度 对 于 保持 网 站 访问 者 的 参与 度 至 关 重 要 。 这 似乎 正 是 关键 CSS 的 工作 ! 

首先 ， 使 用 以 下 终端 命令 ， 通 过 git 在 本 地 Web 服务 器 上 下 载 并 运行 网 站 : 

git clone https://github.com/webopt/ch4-critical-css.git 

cd ch4-critical-css 


npm install 
node http.js 


与 前 面 的 示例 一 样 ， 这 样 做 将 会 安装 Node 依赖 包 ， 并 在 本 地 计算 机 ( http://localhost:8080 ) 


上 运行 网 站 。 服 务 右 启动 并 运行 后 ， 网 站 将 如 图 4-6 所 示 。 


ALLTHEFOODS! = 

Ten Minute Dinners «Dinner Party Hits «Awesome Griling Recipes Healthy Lunches 。 Light Breakfasts Holiday Dinner Guides ”Pal 

Fish Tacos You Might Like... 
= EP 
Beef Burrito Seafood Ceviche 


Beef Empanadas Pico de Gallo 


11 Salsa Verde Tostadas 
> 7) 


These fish tacos are the hit of any dinner party! Tomatoes, white onion, 
garlic, habanero, cilantro, lime and talapia make this a very simple, but 


Ingredients 


4 tomatoes 
14 lime 


4-6 ”Chrome 中 的 菜谱 网 站 ， 人 处 于 大 约 750 像素 宽 的 台式 计算 机 临界 点 
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在 网 站 运行 时 ， 使 用 Chrome 的 Performance 面板 确定 网 站 首次 绘制 的 时 间 。 因 为 你 是 从 本 
地 Web 服务 需 运 行 的 ， 所 以 需要 使 用 网 络 节 流 工具 模拟 互联 网 连接 。 我 们 使 用 Regular 3G 节 流 
配置 文件 ， 这 样 你 就 可 以 以 一 致 的 环境 来 衡量 性 能 提升 。 

首次 绘制 的 时 间 不 会 因 页 面 显 示 在 哪个 临界 点 上 而 有 所 不 同 。 这 取决 于 浏览 器 获取 和 人 处理 
CSS 的 速度 ， 以 及 设备 的 功能 。 在 这 部 分 工作 结束 时 ， 浏览 器 首次 绘制 页 面 所 需 的 时 间 将 缩短 
30%~40%。 

接 下 来 ， 大 致 浏览 网 站 的 文件 夹 结 构 ， 以 便 熟 悉 网 络 资源 的 位 置 和 作用 。 


2. 审查 项 目 结构 

大 部 分 开发 者 应 该 不 会 对 这 个 网 站 结构 感到 陌生 。HITML 位 于 网 站 根 文件 夹 , 名 为 index.html。 
js 目录 包含 几 个 相关 的 JavaScript 文件 ， 例 如 : scripts.min.js 包含 了 网 站 的 一 些 简 单行 为 ， 
loadcss.min.js 和 cssrelpreload.min.js 是 最 小 化 的 preload 资源 提示 polyfil。 在 4.3.3 节 ， 你 会 用 
到 这 个 polyfill。 

less 目录 包含 项 目的 LESS 文件 。main.less 文件 用 于 生成 位 于 CSS 文件 夹 的 styles.min.css 文 
件 。 该 文件 已 通过 index.html 中 的 <1ink> 标 签 加 载 。criticalless 文件 用 于 生成 criticalmin.css 文 
件 , 该 文件 将 内 联 到 index.html。 这 些 文件 中 的 每 一 个 都 是 在 components 子 文件 夹 中 获取 组 件 化 
的 、 特 定 临 界 点 的 文件 ， 分 类 如 下 。 

口 全 局 组 件 一 一 这 些 文件 最 初 包 含 网 站 的 所 有 样式 : 


mm global small.less 


mm global medium.less 
mm global large.less 
口 关键 组 件 一 一 最 初 是 空 的 ,但 最 后 会 包含 首 屏 内 容 的 CSS: 


@m critical small.less 


critical medium.less 


mm critical large.less 


我 们 已 经 知道 了 网 站 的 结构 和 文件 存放 的 位 置 ， 下 面 可 以 继续 找 出 食谱 网 站 的 折 又 的 位 置 。 
4.3.2 ”识别 和 分 离 首 屏 CSS 


本 节 将 从 主 CSS 中 分 离 首 屏 的 关键 CSS， 并 将 其 内 联 到 index.html。 首 先 ， 要 确定 折合 的 
位 置 。 

1. 识别 折 和 又 

要 在 文档 中 识别 并 提取 首 屏 CSS ， 只 需要 练习 在 浏览 器 中 查看 页 面 , 并 识别 首次 加 载 时 在 屏 
幕 上 可 见 的 内 容 。 任 何 可 见 的 内 容 就 是 首 屏 内 容 。 听 起 来 是 不 是 很 简单 ? 

理论 上 这 是 正确 的 , 但 实践 要 复杂 一 些 。 你 使 用 的 设备 并 不 总 和 其 他 人 的 一 样 。 如 果 使 用 分 
辩 率 为 1280x800， 且 窗口 最 大 化 的 笔记 本 计算 机 ， 则 折 双 为 800 像素 减 去 浏览 器 界面 元 素 ( 工 
具 栏 、 地 址 栏 等 ) 的 高 度 。 我 们 不 能 假设 窗口 大 小 固定 , 或 者 设备 一 定 是 笔记 本 计算 机 。 用 户 可 
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能 正在 使 用 iPad 或 者 Android 手机 浏览 网 站 。 
所 幸 有 个 很 棒 的 网 站 mydevice.io 列 出 了 各 种 设备 的 分 辨 率 。 要 查看 这 些 设 备 上 的 折 丢 位 置 ， 
可 以 对 CSS 高 度 列 进行 排序 ， 如 图 4-7 所 示 。 


日 Common Smartphones values 


phys. phys. css CSS 


仿 name $ width 人 height 人 width $ height 
Leap 720 1280 390 695 
iPhone 6 750 1334 375 667 
Xperia P 540 960 360 640 
Xperia S 720 1280 360 640 
G4 1440 2560 360 640 
G3 1440 2560 360 640 


图 4-7 mydevice.io 上 的 常用 设备 分 辩 率 表 ， 按 CSS 高 度 降序 排序 。 该 网 站 还 为 手机 
以 外 的 设备 提供 信息 。 物理 分 辨 率 与 CSS 分 辩 率 的 不 同 之 处 在 于 , 为 了 保持 一 
致 性 ， 它 们 都 被 规范 为 相同 的 比例 


使 用 这 些 数据 即 可 确定 网 站 的 折 爱 位 置 。 为 了 帮助 你 可 视 化 页 面 上 的 临界 线 位 置 , 我 制作 了 

一 个 名 为 VisualFold! 的 书签 工具 。 要 使 用 它 ， 请 将 其 拖 到 书签 栏 ， 点 击 书签 工具 ， 然 后 在 需要 画 
线 的 地 方 输入 一 个 数字 ， 如 图 4-8 所 示 。 也 可 以 通过 输入 逗号 分 隔 的 数字 代码 ， 同 时 绘制 多 条 参 
考 线 。 


eh i 
参考 线 就 会 绘制 到 页 面 


O00 人 


480px fish tacos are the hit of any dinner party! Tomatc 
white onion, garlic, habanero, ane: lime and talapia 
this a very simple, but tasty dis 


全 The page at localhost:8080 says: 
D4 Where would you like the fold line drawn (e.g., 480)? 
f 
Prevent this page from creating additional dialogs. 


480| 


Cancel yj 
Ingredients 


图 4-8 ”VisualFold! 书 签 工 具 的 效果 。 用 户 在 对 话 框 ( 左 ) 中 输入 一 个 数字 ， 指 示 要 在 
页 面 上 ( 右 ) 绘制 的 参考 线 的 位 置 。 这 有 助 于 用 户 定 位 折 羞 线 。 通 过 调整 窗口 
大 小 ， 用 户 即 可 看 到 内 容 相 对 于 这 条 线 是 如 何 流动 的 


你 可 以 借助 此 工具 ,在 480、667、768、800、900、1024 和 1280 像素 的 位 置 绘制 参考 线 。 
这 些 是 流行 设备 的 常见 垂直 分 辨 率 , 并 且 大 多 数 设 备 的 分 辨 率 包 含 在 两 者 之 间 的 任何 位 置 。 制 作 
好 这 些 参考 线 后 ， 你 需要 调整 浏览 器 窗口 的 大 小 ， 以 查看 内 容 在 每 个 临界 点 上 的 位 置 。 
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可 以 看 到 ， 在 所 有 临界 点 中 ， 


点 中 ， 
显示 方式 。 


1280 像素 线 落 在 recipe steps 部 分 的 某 个 位 置 。 在 中 、 
它 也 落 在 右边 的 列 内 容 上 。1280 像素 似乎 是 合理 的 ， 因 为 它 涵盖 了 内 容 在 所 有 设备 上 的 


大 临界 


我 们 用 这 种 方法 为 关键 CSS 设置 了 一 个 阅 值 ， 下 面 可 以 开始 从 主 CSS 中 分 离 这 些 样式 ， 并 


将 它们 放 入 关键 CSS。 


2. 识别 关键 组 件 
下 一 步 是 检查 每 个 临界 点 中 的 页 面 , 并 清点 首 屏 
有 临界 点 的 折 秋 上 方 。 


出 现 的 组 件 。 


流程 自动 化 
使 用 Filament Group 的 CritcalCSS Node 程序 ， 可 以 自动 确定 页 面 上 的 关键 CSS。 本 章 不 
介绍 此 工具 的 用 法 ， 你 可 以 学 习 自 己 识别 关键 组 件 。 这 个 程序 中 的 某 些 特性 也 可 能 破坏 网 站 外 


观 。 如 果 你 决定 使 用 它 ， 一 定 要 检查 输出 ! 


首先 ， 


这 些 组 件 中 的 一 部 分 存在 于 所 


将 视 口 调整 到 移动 端 临 界 点 。 如 果 还 没有 在 1280 像素 的 位 置 放 置 参考 线 ， 现 在 请 使 


用 VisualFold! 来 放置 。 准 备 好 后 ， 在 参考 线 上 方 的 页 面 上 清点 关键 组 件 ， 如 图 4-9 所 示 。 


内 容 容 器 


局 ALLTHEFOODS! 


Ten Minute Dinners ”Dinner Party Hits Awesome Griling Recipes 上 


Fish Tacos 


O00 


These fish tacos are the hit of any dinner party! Tomatoes, 


: 术 white onion, garlic, habanero, cilantro, lime and talapia make 
描述 this a very simple， but tasty dish 


Ingredients 


4 tomatoes 
114 lime 


1 teaspoon of olive oil 


= A 


Steps 
Step 1 


Dice the tomatoes, garlic, and the half white onion and 
discard the pulpy insides. Place the diced pieces into a bowl 


for mixing 


Step 2 


证 


~、 4 


1/2 white onion 


Squeeze the lime and add the salt over the diced tomatoes, 
garlic and onions, 


Step3 


Chop up the habanero and dice up the hant and add itto 
the pico. Mix everything together with a spoo 


Step 4 


Add the olive oilto a skillet. Dice up the fish and fry itin a 
Skillet until slightly browned. 


Step 5 


When the fish is cooked, warm up the tortillas in either a 
large skillet or a pan in the oven at 250 degrees. 


Step 6 


| 12somzx 局 pico ht md fish to the tortillas. Serve with a 


Ime wedge and e 


Es 1 bunch of cilantro 
原料 列表 1 clove of garlc 
1 habanero 

6 flour tortillas 


1 pinch of salt 


图 4-9 页面 的 移动 端 临界 点 ， 关 键 组 件 带 有 标签 


和 菜谱 步 又 
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图 4-9 的 组 件 清单 仅 与 此 网 站 相关 。 当 你 为 自己 的 网 站 这 样 做 时 ,清单 会 有 所 不 同 。 完 成 此 
步骤 后 ， 可 以 将 窗口 放大 到 更 大 的 临界 点 中 ， 并 计 入 页 面 上 新 的 关键 组 件 ， 如 图 4-10 所 示 。 


主 栏 目 内 容 列表 
人. 
用 
Sd 


njoy These Pathetic 
Cakes 


.一 收藏 列表 


右边 栏 广告 
图 4-10 更 大 的 临界 点 ， 其 中 标记 了 在 移动 端 版 本 中 首 屏 以 外 的 组 件 


注意 ， 当 你 进入 大 临界 点 时 ， 内 容 将 分 成 两 列 。 图 4-10 突出 显示 了 出 现在 移动 端 临 界 点 首 
屏 以 外 的 另外 5 个 关键 组 件 。 因 此 ， 它 们 将 成 为 大 屏幕 上 的 关键 组 件 。 

通常 你 需要 评估 最 大 的 临界 点 ,但 在 本 例 中 ， 此 临界 点 中 首 屏 以 外 不 会 出 现 新 的 关键 组 件 。 
页 肝 会 更 改 , 但 页 面 的 其 余部 分 会 展开 ， 直 到 满足 页 面容 器 的 最 大 宽度 1024 像素 为 止 。 

现在 我 们 已 经 拥有 首 屏 组 件 的 清单 ， 可 以 继续 分 离 关 键 CSS 与 主 样式 表 。 


3. 分 离 关 键 CSS 

确定 关键 组 件 后 ， 可 以 从 main.less 引用 的 临界 点 特定 引入 中 删除 它们 的 相关 样式 ， 并 放 入 
critical.less 引用 的 引入 。 对 于 这 个 移动 优先 的 网 站 , 大 多 数 默认 样式 是 在 global_small.less 文件 中 
定义 的 ， 中 临界 点 和 大 临界 点 也 有 涉及 。 表 4-1 列 出 了 清单 中 的 组 件 ， 以 及 与 它们 相关 的 父 容器 
选择 器 。 


表 4-1 关键 组 件 及 其 相关 的 父 容器 选择 器 。 这 些 选择 器 可 用 于 搜索 网 站 LESS 文件 中 组 件 的 样式 


关键 组 件 相关 的 父 容器 选择 器 
网 站 页 丑 header 
内 容 导航 区 .destinations 
沫 谱 标题 -TecipeName 
内 容 容 需 #content 
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( 续 ) 

关键 组 件 相关 的 父 容器 选择 器 
菜谱 图 片 #masthead 
菜谱 属性 .attributes 
社交 按钮 .actions 
菜谱 描述 .description 
节 标 题 .sectionHeader 
原料 列表 .ingredientList 
广告 位 .ad 
菜谱 步骤 .StepList 
主 栏目 #mainColumn 
右边 栏 aside 
内 容 列表 、 收 藏 列表 .contentList 
右边 栏 广 告 .ad 


深入 讨论 表 4-1 的 内 容 之 前 , 需要 将 对 reset.less 的 引用 从 main.less 的 第 二 行 移 到 critical.less 
的 第 二 行 。reset.less 是 从 Eric Meyer 的 CSS reset 继承 的 全 局 组 件 ， 它 重 置 了 许多 元 素 的 默认 样 
式 ， 以 便 在 浏览 器 之 间 进 行 更 一 致 的 泻 染 。 因 为 页 面 上 的 所 有 元 素 都 继承 自 此 组 件 ， 所 以 这 些 样 
式 非常 关键 。 

完成 后 保存 两 个 文件 ， 并 编译 main.less。 如 何 编译 取决 于 操作 系统 。 在 类 UNIX 系统 (如 
OS X 和 Linux ) 上 ， 在 项 目的 根 目录 下 运行 less.sh。 在 Windows 系统 上 ， 则 改 用 less.bat。 每 次 
更 改 项 目的 任何 .less 文件 时 ， 都 要 运行 此 脚本 。 

开始 将 样式 移动 到 关键 CSS 组 件 文件 之 前 ,明知 的 做 法 是 注释 掉 index.html 的 第 7 行 。 这 是 
一 行 <link> 标 签 引 用 ， 它 引入 了 网 站 的 样式 。 这 样 会 使 页 面 失去 样式 ， 但 是 当 你 开始 将 
critical.min.css 内 联 到 页 面 时 ， 它 使 可 视 化 关键 CSS 更 加 容易 。 

将 CSS reset 模块 移 到 critical.less 后 ,下 一 步 是 对 表 4-1 中 列 出 的 每 个 关键 组 件 及 其 选择 需 重 
复 这 个 过 程 。 

从 页 眉 组 件 开 始 ， 打 开 components 文件 夹 中 的 global _small.less 文件 并 找到 header 选择 器 。 
将 其 剪 切 并 粘贴 到 critical 文件 夹 中 的 critical smallless 文件 ， 保 存 所 有 文件 ， 然 后 重新 生成 
main.less。 
重新 编译 LESS 文件 后 ， 在 文本 编辑 器 的 CSS 文件 夹 中 打开 criticalmin.css， 并 将 其 内 容 复 
制 到 index.html 的 <headq> 中 的 <style> 标 签 。 此 时 页 面 应 该 如 图 4-11 所 示 。 
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A ,. 


Ight Breakfasts | 如 
Holiday Dinner Guides 的 头 部 
Pathetic Cakes 

Fish Tacos 


| 

15 min prep 
45 min total 
11 ingredients 
These fish tacos are the hit of any dinner party! 
Tomatoes, white onion, garlic, habanero, cilantro, lime 
and talapia make this a very simple, but tasty dish. 
Ingredients 


图 4-11 将 页 眉 选 择 器 CSS 内 联 到 HTML 后 的 菜谱 网 站 的 外 观 。 它 拥有 一 部 分 样式 ， 
但 仍 有 很 多 遗漏 


显然 你 还 缺少 很 多 样式 。 页 面 上 的 <header> 元 素 看 起 来 有 点 样式 ,但 它 还 有 许多 子 元 素 ， 
它们 应 该 有 自己 的 样式 。 为 了 将 这 个 关键 组 件 完全 添加 到 关键 CSS， 有 必要 深入 到 HTML 中 清 
点 哪些 元 素 是 <header> 元 素 的 子 元 素 , 并 找到 相关 的 CSS 选择 器 。 以 下 是 global_ small.less 中 包 
含 <header> 元 素 子 元 素 样式 的 选择 器 : 

口 #logo 


innerHeader 
nav 
nav:hover.nayv 


navicon 


navIicon>div 
.DaV 


.Show 


DOOOOODO DO 


.mavVILem 
将 这 些 元 素 的 CSS 从 global_small .1ess 剪 切 粘贴 到 critical_small.1less 并 重新 编 
译 main.less 时 ， 你 将 看 到 如 图 4-12 所 示 的 内 容 。 
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ALLIHEFOODSIvw 二 Be 拥有 完整 样式 


Ten Minute Dinners 由 
Dinner Party Hits 的 头 部 
Awesome Grilling Recipes 
Healthy Lunches 

Light Breakfasts 

Holiday Dinner Guides 
Pathetic Cakes 

Fish Tacos 


i 
15 min prep 
45 min total 
11 ingredients 


图 4-12 将 所 有 页 眉 样式 内 联 到 index.html 后 的 关键 CSS 


可 以 看 出 ， 现 在 的 样式 看 起 来 更 适合 页 眉 。 在 小 临界 点 把 组 件 CSS 移 到 关键 CSS 中 后 ， 还 
要 在 所 有 临界 点 上 重复 相同 的 任务 。 继 续 处 理 global medium.less 和 global large.less 文件 ， 并 将 
与 页 眉 相 关 的 样式 分 别 移 到 critical medium.less 和 critical small.less 文件 中 。 对 每 个 临界 点 执行 
此 操作 后 ， 重 新 编译 main.less 并 将 critical.min.css 的 内 容重 新 内 联 到 jngdex.html。 

重复 这 些 步骤， 直到 完成 表 4-1 中 所 有 关键 组 件 的 工作 ， 每 次 都 要 重新 编译 关键 CSS， 并 将 
其 内 联 到 index.html。 完 成 后 的 页 面 应 该 像 开 始 工作 之 前 一 样 , 而 1280 像素 线 以 下 的 组 件 会 缺少 
大 部 分 样式 。 


想 要 跳 过 ? 
如 果 你 遇 到 困难 ， 可 以 跳 过 并 输入 git checkout -f criticalcss， 查 看 关键 CSS 
实现 后 的 效果 ， 完 整 代 码 将 被 下 载 到 你 的 计算 机 上 。 如 果 你 有 任何 更 改 要 保留 ， 请 确保 已 
备份 。 


关键 CSS 与 全 局 CSS 分 离 后 ， 即 可 使 用 <1inks 标 签 的 preload 资源 提示 加 载 页 面 CSS 的 
其 余部 分 。 


4.3.3 加载 首 屏 以 外 内 容 的 CSS 


最 后 一 步 是 异步 加 载 styles.min.css 中 首 屏 以 外 内 容 的 CSS。 你 可 能 想 使 用 标准 的 <1ink> 标 
签 包含 来 实现 这 一 点 ,但 是 正如 4.1.2 节 讨 论 的 那样 ，<1Link> 标 签 会 阻塞 页 面 泻 染 。 要 避免 这 种 
情况 ， 需 要 使 用 前 面 提 到 的 preload 资源 提示 。 


1. 使 用 preload 资源 提示 异步 加 载 CSS 
如 前 所 述 , preload 资源 提示 指示 浏览 器 尽快 开始 获取 资源 。 在 关键 CSS 的 情况 下 ， 可 以 
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使 用 这 个 提示 异步 加 载 首 屏 之 外 不 大 重要 的 CSS ， 而 不 阻塞 页 面 的 泻 染 。 要 对 菜谱 网 站 执行 此 
操作 ， 需 要 删除 index.html 中 的 所 有 <1ink> 标 签 ， 并 将 代码 清单 4-1 中 的 两 行 添加 到 内 联 CSS 
之 后 。 


代码 清单 4-1 使 用 preloaa 资源 提示 异步 加 载 CSS 文件 


这 个 <1link> 标 签 是 一 个 
> preload 资源 提示 
二 
步 加 载 <link rel="preload" 


次 酒会 袖 出 
href="css/styles.min.css" Re 
as="style" 过 


onload="this.rel='stylesheet'"> 
<noscript><link rel="stylesheet" href="css/styles.min.css"></noscript> 
资源 加 载 完 成 后 ，<Link> 标 签 的 
rel 属性 会 变 成 stylesheet 


这 段 代码 不 仅 异 步 加 载 了 CSS, 还 考虑 了 那些 禁用 JavaScript 的 用 户 , 通过 传统 方式 从 <noscript> 
标签 ( 如 最 后 一 行 所 示 ) 加 载 非 关 键 CSS。 这 些 用 户 将 受到 旧 的 CSS 加 载 行为 的 阻塞 泻 染 行为 
的 影响 ， 但 他 们 不 会 得 到 无 样式 的 页 面 。 


2. polyfill preload 资源 提示 

并 非 所 有 浏览 器 都 支持 资源 提示 , 该 功能 的 支持 通常 仅 限于 Chrome 和 Opera 等 基于 Chrome 
的 浏览 器 。 因 此 ， 这 种 方法 对 于 很 大 一 部 分 用 户 来 说 将 会 失败 。 为 了 解决 这 个 问题 ， 可 以 使 用 
Filament Group 提供 的 polyfill， 名 为 10adcss。 

我 将 这 个 polyfill 的 脚本 放 在 菜谱 网 站 GitHub repo 的 js 文件 来, 文件 包括 cssrelpreload.min.js 
( polyfill preload 资源 提示 功能 ) 和 loadcss.min.js ( 当 preload 资源 提示 功能 不 可 用 时 ， 提 供 
异步 加 载 CSS 行为 )。 

要 使 用 polyfill 很 容易 。 可 以 使 用 <script> 标 签 按 顺序 包含 loadcss.minjs 和 cssrelpreload. 
min.js， 但 这 会 阻塞 泻 染 ， 而 我 们 一 直 试 图 避免 这 个 问题 。 取 而 代 之 ， 应 该 按照 单个 <script> 
标签 中 指示 的 顺序 内 联 这 些 脚 本 ， 并 将 内 联 脚 本 放 在 代码 清单 4-1 所 示 的 代码 之 后 。 执 行 此 操作 
时 ， 可 以 在 不 支持 预 加 载 行为 的 浏览 句 (如 正 ) 中 测试 加 载 行为 。 你 会 发 现 首 屏 以 外 的 CSS 应 
该 泻 染 (在 没有 polyfill 脚本 之 前 CSS 不 会 泻 染 )。 

在 菜谱 网 站 中 完全 实现 关键 CSS 方法 后 ， 你 可 以 继续 分 析 你 的 工作 带 来 的 好 处 。 
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开始 之 前 , 我 声称 你 会 看 到 首次 绘制 的 时 间 减 少 30%~40% 。 我 更 用 Chrome 在 几 个 节 流 配置 
中 评估 了 这 个 性 能 指标 。 你 可 以 在 图 4-13 中 看 到 结果 。 
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实现 关键 CSS 前 后 的 首次 绘制 时 间 对 比 
(数值 越 低 越 好 ) 


GPRS 


0.54s 
0.33s 
Regular 3G 一 WA 
0.23 S 


| 024s 


0.15s 


于 019s 


Regular 4G 本 0.128 


0.16s 


DSL 
| |]0.12s 


0.0s 0.5s 1.0s 1.5s 2.0s 2.5s 
首次 绘制 时 间 


图 4-13 在 Google Chrome 中 实现 关键 CSS 前 后 的 首次 绘制 性 能 对 比 


1.31s 


22s 类 关 急 css 章 
| | 实现 关键 CSS 后 


Good 3G 


如 你 所 见 ， 随 着 连接 速度 增加 和 延迟 减少 , 收益 也 会 减少 。 你 所 做 的 任何 一 种 前 端 优化 都 是 
这 样 的 。 并 非 每 个 连接 都 会 创造 同等 收益 , 为 那些 最 有 可 能 使 用 低 质 量 互联 网 连接 的 移动 用 户 进 
行 优化 尤为 重要 。 
对 于 从 共享 主机 访问 菜谱 网 站 的 移动 设备 来 说 , 收益 要 稍微 小 一 些 , 首次 绘制 时 间 大 约 减 少 
了 20%， 如 图 4-14 所 示 。 
Mobile Safari 中 实现 关键 CSS 前 后 的 首次 绘制 时 间 对 比 


(数值 越 低 越 好 ) 
1000 ms 实现 a 
877 ms 圆 实现 关键 CSS 前 
800 ms 744ms ”| | 实现 关键 CSS 后 
革 
趣 600 ms 
下 474 ms 
SK 
R400 ms 309 ms 
站 
200 ms 
0 ms 
电缆 (50 Mbps) LTE 


图 4-14 在 Mobile Safari 中 实现 关键 CSS 前 后 的 首次 绘制 性 能 对 比 。 设 备 为 iPhone 6S ， 
通过 远程 共享 主机 连接 
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有 一 个 统计 数据 需要 记 住 : 0.1 秒 是 用 户 感 觉 界面 瞬间 做 出 反应 的 极限 。 除 了 已 经 学 过 的 其 
他 技巧 ( 以 及 以 后 要 学 的 更 多 技巧 ) 之 外 ,减少 首次 绘制 的 时 间 也 会 让 用 户 觉 得 网 站 反应 很 快 。 
如 果 这 对 你 很 重要 , 那么 就 值得 考虑 在 网 站 上 应 用 关键 CSS。 用 户 越 早 感觉 到 可 与 网 站 交互 , 他 
们 就 越 有 可 能 持续 浏览 你 提供 的 内 容 。 


4.5 提升 可 维护 性 


使 用 关键 CSS 的 最 大 障碍 是 维护 内 联 代 码 。 每 次 文档 发 生 更 改 时 ， 将 关键 CSS 复制 并 粘贴 

到 文档 的 <nead> 中 是 很 低 效 的 。 而 且 内 联 polyfill 脚本 也 很 麻烦 。 如 果 有 什么 变化 ， 你 必须 重新 

内 联 修 改 后 的 代码 。 理 想 情况 下 ,你 需要 既 能 维护 独立 文件 ， 又 能 够 将 它们 自动 内 联 ， 这 样 即 可 

获得 资源 内 联 为 浑 染 带 来 的 好 处 。 | 
有 一 种 方法 可 以 减少 复制 粘贴 代 码 的 日 常 工作 : 使 用 服务 器 端 语言 将 文件 内 联 到 HTML 。 

PHP 的 file _ get_contents 功能 就 非常 适合 此 任务 。 此 也 数 从 磁盘 读 取 文件 ， 并 允许 将 其 内 

联 到 文档 。 使 用 该 函数 在 文档 的 <head> 中 内 联 关 键 CSS 的 方法 如 代码 清单 4-2 所 示 。 


代码 清单 4-2 使 用 PHP 内 联 样式 表 


使 用 file_get_contents 
将 关键 CSS 在 服务 器 端 | 
<style> 
<?php echo(file get_ contents("./css/critical.min.css")); ?> 
</style> 
<link rel="preload" href="css/styles.min.css" as="style" 
onload="this.rel='stylesheet'"> 
<noscript><link rel="stylesheet" href="css/styles.min.css"></noscript> 
<script> 
<?php 
echo (file get_contents("./js/loadcss.min.js")); 


echo(file get_ contents("./js/cssrelpreload.js")); ee 有 
preload 资源 提示 polyfi11 


也 通过 file_get_contents 


在 服务 器 端 内 联 
这 种 方法 可 以 实现 单个 文件 的 模块 化 ， 同 时 还 可 以 享受 内 联 提供 的 好 处 。 这 一 功能 也 不 是 
PHP 独 有 的 。 任 何 广泛 使 用 的 服务 器 端 技术 都 会 有 一 个 等 效 的 方法 ， 可 以 获得 相同 的 结果 。 
4.6 多 页 网 站 的 注意 事项 


本 章 介绍 了 如 何在 一 个 页 面 上 实现 关键 CSS, 那么 对 于 多 页 面 网 站 呢 ? 方法 是 类 似 的 , 但 如 
图 4-15 所 示 ， 关 注 点 是 模块 化 。 


全 加 
</script> 
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和 ~ 
<style> 
= 
> </style> 


仅 内 联 到 模板 A 


<style> 


</style> 


和 
全 局 关键 样式 内 
联 到 所 有 模板 ey 二 
</style> 


Template A.html 模板 A 的 关键 样式 


Template B.html 模板 B 的 关键 样式 


仅 内 联 到 模板 B 


在 各 自 的 页 面 ， 但 全 局 通用 的 关键 样式 是 共同 内 联 的 


图 4-15 关键 CSS 的 模块 化 方法 。 模 板 A 和 模板 B 都 有 自己 的 关键 CSS， 它 们 只 内 联 


从 图 4-15 中 可 以 看 到 两 个 页 面 模板 : 模板 A 和 模板 B。 它 们 都 是 唯一 的 ， 因 为 它们 的 首 屏 
内 容 对 应 了 不 同 的 CSS。 为 了 提高 效率 ， 将 每 个 页 面 模板 的 关键 CSS 拆 分 为 单独 的 文件 是 有 意 


义 的 。 然 后 这 些 文件 只 为 需要 它们 的 页 面 内 联 即 可 。 
但 是 对 于 网 站 上 每 个 页 面 都 存在 的 组 件 ， 比 如 标题 、 导 航 、 标 题 样式 等 ， 


它们 也 有 一 些 关键 


的 样式 。 将 这 些 样式 单独 存储 起 来 ， 并 将 它们 内 联 到 整个 网 站 的 所 有 页 面 ， 也 是 有 意义 的 。 
在 具有 多 个 模板 的 大 型 网 站 上 实现 关键 CSS 时 ， 其 理念 是 避免 为 每 个 页 面 上 的 每 个 唯一 模 


板 组 合 关键 CSS。 需 要 相应 地 存储 这 些 样式 ， 并 仅 内 联 特定 页 面 所 需 的 CSS。 


好 消息 是 ， 这 不 会 改变 实现 关键 CSS 的 方式 。 你 要 为 每 个 页 面 模板 重复 操作 ， 其 过 程 是 相 
同 的 。 而 更 重要 的 是 ， 你 需要 研究 你 的 网 站 分 析 报告 ， 并 考虑 在 高 价值 的 页 面 上 使 用 这 种 方法 ， 
这 些 页 面 的 收益 会 更 大 。 实 现 关键 CSS 需要 付出 很 多 努力 ， 这 与 收益 是 成 正比 的 ， 但 你 要 优先 


考虑 最 重要 的 内 容 页 。 


4.7 小结 


本 童 我们 了 解 了 关键 CSS 的 重要 性 ， 这 个 广泛 且 重 要 的 概念 包含 以 下 小 概念 和 方法 。 


的 设备 发 生变 化 。 


口 折 爱 是 一 个 灵活 的 概念 。 它 指 的 是 内 容 在 屏幕 上 不 可 见 的 分 界 点 ， 它 还 会 基于 查看 页 面 


D <1ink> 标 签 会 阻塞 网 页 泻 染 ， 从 而 延迟 文档 的 绘制 。 关 键 CSS 可 以 缓解 这 种 行为 。 
口 关键 CSS 的 工作 原理 是 优先 加 载 折 秋之 上 的 首 屏 内 容 ( 而 不 是 折 礁 之 下 的 内 容 )。 关 键 


CSS 内 联 到 网 站 HTML 中 ， 而 非 关键 的 样式 则 以 延迟 的 方式 加 载 。 延 迟 加 载 非 关 键 样式 


后 ， 即 可 避免 泻 染 阻塞 的 影响 。 
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口 实现 关键 CSS 不 仅 让 用 户 感 觉 页 面 加 载 速度 更 快 ， 而 且 这 种 现象 是 可 衡量 的 。 使 用 关键 


CSS 时 ,页面 首次 绘 1 
对 该 度量 的 影响 。 


出 的 时 间 会 减少 。 可 以 使 用 Chrome 的 Performance 面板 比较 关键 CSS 


我 们 已 经 了 解 了 如 何 实现 关键 CSS， 并 看 到 了 它 为 用 户 提供 的 好 处 。 下 面 进入 第 5 章 ， 学 习 


根据 请 求 图像 的 设备 能 力 提供 服务 的 重要 性 。 


咯 应 式 图 像 


本 章 内 容 

口 使 用 CSS 媒体 查询 ， 为 用 户 设备 传输 正确 的 背景 图 像 

口 在 HTML 中 使 用 srcset 和 <picture> 元 素 传输 响应 式 图 像 

口 使 用 Picturefill 在 特定 浏览 器 中 提供 srcset 和 <picture> 的 polyfill 
口 在 CSS 和 HTML 中 使 用 SVG 图 像 


我 们 已 经 学 习 了 有 用 的 CSS 优化 技术 ,下面 深 入 了 解 在 网 站 上 管理 图 像 的 重要 性 。 

图 像 通常 是 网 站 总 负载 的 最 大 组 成 部 分 , 并 且 这 种 趋势 没有 任何 改变 的 迹象 。 尽管 互联 网 连 
接 速 度 不 断 提高 , 但 许多 设备 都 配备 了 高 DPI 显示 器 。 为 了 在 这 些 设备 上 显示 最 佳 效果 ,， 图像 需 
要 具备 更 高 的 分 辨 率 。 然 而 ,由 于 我 们 仍然 需要 支持 屏幕 功能 较 差 的 设备 ,因此 依旧 需要 较 低 分 
辩 率 的 图 像 ， 并 且 必 须 关注 图 像 传输 到 各 种 设备 的 方式 。 

图 像 传输 的 目的 不 仅 是 提供 尽 可 能 好 的 视觉 体验 ,而且 要 提供 适合 设备 功能 的 图 像 。 知 道 如 
何 正 确 传输 图 像 后 ,就 可 以 确保 功能 较 弱 的 设备 永远 不 会 承受 超出 其 承受 能 力 的 负担 ,同时 确保 
功能 最 强 的 设备 接收 到 尽 可 能 好 的 体验 。 保 持 这 种 平衡 即 可 确保 视觉 吸引 力 和 性 能 的 完美 融合 。 


5.1 为 什么 要 考虑 图 像 传 输 


Web 性 能 中 与 图 像 相关 的 一 个 组 成 部 分 , 就 是 将 正确 的 图 像 大 小 和 类 型 提供 给 最 适合 使 用 它 
们 的 设备 。 本 节 将 介绍 在 CSS 和 HTML 中 正确 传输 图 像 的 重要 性 。 我 们 谈论 图 像 传输 时 ， 其 实 
是 在 谈论 响应 式 地 提供 图 像 。 

如 果 你 关注 网 站 的 性 能 , 就 需要 重视 响应 式 图 像 。CSS 的 响应 式 是 很 重要 的 ,这 关系 到 你 的 
网 站 是 否 可 以 在 尽 可 能 多 的 设备 上 提供 良好 的 浏览 体验 。 缩放 和 文件 大 小 这 两 个 原因 也 使 得 图 像 
的 响应 式 很 重要 。 

当 图 像 满足 响应 式 要 求 时 ， 用户 将 获得 其 设备 所 能 提供 的 最 佳 体 验 。 例如， 大 图 像 虽 然 可 以 
很 好 地 在 所 有 设备 上 按 比例 缩小 ， 但 这 不 是 最 佳 选择 ， 即 使 它 看 起 来 很 适合 所 有 设备 。 实 际 上 ， 
设备 不 得 不 获取 一 张 超大 图 像 ， 然 后 重新 缩放 以 适应 屏幕 。 此 外 ,这 种 图 像 文件 偏 大 ， 因 此 需要 
更 多 下 载 时 间 ， 这 会 导致 网 站 性 能 降低 。 
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更 合理 的 做 法 是 提供 最 符合 设备 需要 的 图 像 。 这 就 需要 维护 多 组 图 像 , 但 这 项 工作 是 值得 的 ， 
因为 处 理 和 下 载 图 像 的 时 间 是 最 少 的。 图 5-1 显示 了 图 像 缩 放 的 低 效 方法 和 高 效 方法 。 


| 低 效 方 式 ; 
.一 需要 缩放 图 像 


1440 x 900 750 x 1334 
170 KB 视网膜 屏幕 


高 效 方式 : 
750 x 469 
41 KB 
750 x 1334 
视网膜 屏幕 


图 5-1 将 图 像 缩 放 到 手机 上 的 两 个 示例 。 第 一 组 图 : 宽度 为 1440 像素 的 一 张 170 KB 
的 图 像 ， 被 缩小 到 手机 高 DPI 屏幕 的 宽度 。 第 二 组 图 : 宽度 为 750 像素 的 一 张 
41 KB 的 图 像 ， 无 须 缩放 就 可 以 传输 到 屏幕 上 。 后 一 过 程 更 高 效 


此 外 ， 你 也 必须 检查 响应 式 图 像 的 性 能 影响 。Google Chrome 的 Performance 面板 再 次 派 上 
用 场 , 你 可 以 用 它 来 测量 低 效 图 像 缩 放 与 高 效 图 像 缩 放 的 泻 染 和 绘制 性 能 。 这 个 测试 在 每 个 场景 
下 运行 了 5 次， 捕获 了 两 个 参数 : 泻 染 时 间 和 绘制 时 间 ， 如 图 5-2 所 示 。 

泻 染 时 间 和 绘制 时 间 : 图 像 缩放 与 无 缩放 


(数值 越 低 越 好 ) 
国 钉 六 
| | 无 缩放 
演 染 
绘制 
1 1 1 1 1 
0 mas 1 mas 2 ms 3 ms 4ms 5ms 


图 5-2 Chrome 中 单个 图 像 的 泻 染 和 绘制 时 间 的 比较 。 在 缩放 场景 中 ，1440x900 的 源 
图 像 被 缩放 至 适合 375 像素 宽 的 设备 。 而 在 无 缩放 场景 中 , 已 提前 调整 好 大 小 
的 图 像 将 适应 设备 ， 且 不 会 触发 缩放 。 显 然 ， 无 缩放 的 泻 染 和 绘制 速度 更 快 
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在 这 个 场景 中 , 我 观察 到 泻 染 时 间 减 少 了 15%, 绘制 时 间 减 少 了 36%。 虽 然 改进 只 是 毫秒 级 
别 的 , 但 重要 的 是 , 这 仅仅 是 单一 图 像 的 测量 。 通过 在 整个 网 站 上 实现 响应 式 图 像 可 以 减少 处 理 
时 间 ， 帮 助 页 面 更 灵敏 地 响应 用 户 输入 。 

是 否 可 以 为 所 有 设备 提供 完美 缩放 的 图 像 ? 虽然 一 切 凤 有 可 能 , 但 这 样 的 目标 并 不 现实 。 最 
佳 的 方式 是 , 定义 一 个 图 像 宽 度 的 数组 , 获 盖 所 需 的 整个 范围 ,并 理解 数组 中 的 图 像 之 间 会 存在 
一 些 重 着 ,以 满足 不 同 设备 和 显示 密度 的 需要 。 一 定 程度 的 缩放 是 不 可 避免 的 , 但 你 要 尽量 减少 
这 种 情况 的 发 生 。 

如 何 使 用 响应 式 图 像 取决 于 它们 的 使 用 位 置 。 要 知道 , 图 像 通常 在 CSS 和 HTML 中 被 引用 。 
当 你 读 完 本 章 的 其 他 内 容 ,， 将 了 解 到 各 种 类 型 的 图 像 及 其 最 佳 用 途 ， 以 及 如 何在 CSS 和 HTML 
中 响应 式 地 使 用 它们 。 


5.2 理解 图 像 类 型 及 其 应 用 


在 互联 网 上 使 用 图 像 曾 经 很 简单 : 虽然 存在 一 些 格 式 , 但 都 是 位 图 ( 也 称 为 光栅 ) 图 像 。 有 
些 图 像 比 其 他 图 像 更 适合 特定 的 任务 。 这 些 规 则 在 今天 仍然 适用 , 但 形势 已 经 发 生 了 变化 , 应 用 
场景 也 比 以 前 更 广 。 本 节 将 讲解 两 种 主要 图 像 类 型 : 光栅 和 SVG。 


5.2.1 使 用 光栅 图 像 


如 前 所 述 ， 在 Web 上 最 常 使 用 的 图 像 类 型 是 光栅 ， 有 时 也 称 为 位 图 图 像 。 其 典型 的 例子 是 
JPEG、PNG 和 GIF 图像， 它们 由 二 维 网 格 上 对 齐 的 像素 组 成 。 图 5-3 显示 了 一 个 YouTube 网 
站 图 标的 例子 。 为 解释 光栅 图 像 的 概念 ， 我 们 将 这 个 图 从 16 像素 x16 像素 放大 到 512 像素 x 
512 像素 。 


图 5-3 YouTube 网 站 图 标的 16x16 光栅 图 像 。 左 边 是 图 像 的 原始 大 小 ， 右 边 是 其 放大 

后 的 版 本 。 每 个 像素 都 是 二 维 网 格 的 一 部 分 

光栅 图 像 用 于 描述 Web 上 的 各 种 内 容 : logo、 图 标 、 照 片 等 。 在 HTML 中 , 它们 使 用 <img> 
标签 显示 。 在 CSS 中 ， 它 们 通常 用 于 background 属性 ， 但 也 可 以 用 于 其 他 较 少 使 用 的 属性 ， 


如 list-style-image。 
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光栅 图 像 有 儿 种 格式 , 每 种 格式 适合 特定 类 型 的 内 容 。 本 节 将 按 不 缩 方式 对 这 些 图 像 进 行 分 
类 。 我 们 在 第 1 章 使 用 服务 器 压缩 来 缩小 样式 表 、 脚 本 和 HTML 资源 的 文件 。 本 将 了 解 光 栅 
图 像 的 压缩 ， 光 栅 图 像 分 为 两 类 : 有 损 和 无 损 。 


1. 有 损 图 像 

有 损 图 像 采 用 了 丢弃 未 压缩 图 像 源 中 数据 的 压缩 算法 。 这 些 图 像 类 型 的 实现 思路 是 : 可 以 接 
受 一 定 程度 的 质量 损失 ， 以 换取 较 小 的 文件 。 

数码 相机 就 是 有 损 图 像 的 一 个 很 好 的 例子 。 从 数码 相机 的 存储 卡 下 载 的 照片 通常 是 JPEG 格 
式 。 当 相机 拍摄 照片 时 ， 它 将 照片 的 未 压缩 版 本 存储 在 内 存 中 , 并 使 用 无 损 压 缩 将 未 压缩 的 源 转 
换 为 JPEG 图 像 。 

JPEG 图 像 在 网 络 上 几乎 无 处 不 在 。 在 流行 的 照片 共享 网 站 Flickr 上 有 一 个 使 用 JPEG 格式 的 
生动 例子 ， 如 图 5-4 所 示 。 


lickr Explore Create 


图 5-4 在 流行 的 照片 记录 和 共享 网 站 Flickr 上 使 用 的 JPEG 图 像 。 摄 影 内 容 最 适合 JPEG 格式 


这 种 格式 有 一 个 缺点 : 极端 的 压缩 会 变 得 很 明显 。 如 果 这 些 文件 类 型 不 是 从 未 压缩 的 源 ( 如 
PSD 文件 ) 保存 的 , 则 它们 也 容易 发 生 代 际 损失 。 当 已 经 压缩 的 文件 被 重新 压缩 时 ， 会 发 生 代 际 
损失 ， 从 而 导致 进一步 的 视觉 效果 退化 。 然 而 在 实践 中 ， 如 果 小 心 使 用 压缩 ,退化 应 该 不 会 很 明 
显 ， 而 且 这 些 图 像 类 型 是 从 未 压缩 的 源 保存 的 。 

图 5-5 显示 了 一 张 照片 的 两 个 版 本 。 左 边 的 图 像 是 未 压缩 的 源 ， 右 边 的 图 像 是 对 其 适量 应 用 
JPEG 压缩 后 的 副本 。 
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未 压缩 JPEG 
(269KB) (12KB) 


图 5-5 比较 未 压缩 (TIFF ) 和 压缩 (JPEG ) 格式 的 同一 图 像 及 其 各 自 的 文件 大 小 。 
JPEG 版 本 在 30 的 质量 设置 下 有 细微 的 退化 ,但 这 种 情况 是 可 以 接受 的 。 图 
像 来 源 : 美国 国家 航空 航天 局 喷气 推进 实验 室 


视觉 质量 可 以 反映 从 未 压缩 源 到 压缩 后 的 JPEG 的 细微 退化 。 考 虑 到 JPEG 版 本 比 未 压缩 的 
TIFF 版 本 小 96%， 这 种 视觉 质量 的 损失 是 一 种 可 以 接受 的 折 囊 方案 。JPEG 算法 的 输出 质量 以 
1~100 的 刻度 表示 ， 其 中 1 最 低 ，100 最 高 。 

JPEG 并 不 是 Web 使 用 的 唯一 一 种 有 损 图 像 格式 ， 还 有 其 他 格式 ， 比 如 Google 的 新 的 WebP 
图 像 格 式 ( 参见 第 6 章 ),。 下面 学 习 无 损 图 像 类 型 。 


2. 无 损 图 像 
另 一 类 光栅 图 像 是 无 损 图 像 。 这 些 图 像 类 型 使 用 不 从 原始 图 像 源 中 删除 数据 的 压缩 算法 。 一 
个 很 好 的 例子 是 Facebook 网 站 桌面 版 的 标志 ， 如 图 5-6 所 示 。 


| 可 Search 


图 5-6” Facebook 标志 是 一 个 PNG 图 像 ， 这 是 一 种 无 损 的 图 像 格 式 。 
PNG 网 像 非 常 适合 无 损 格式 


与 有 损 图 像 格式 不 同 , 无 损 格式 非常 适合 对 图 像 质量 要 求 比较 高 的 场景 。 这 使 得 无 损 格式 成 
为 图 标 等 内 容 的 最 佳 选择 。 无 损 图 像 类 型 通常 分 为 以 下 两 类 。 

口 8 位 (256 色 ) 图 像 一 一 包括 GIF 和 8 位 PNG 格式 ， 这 些 格式 仅 支持 256 色 和 1 位 透明 
度 。 尽 管 它 们 的 色彩 比较 局 限 ， 但 对 于 不 需要 大 量 颜 色 或 复杂 透明 度 的 图 标 和 像素 艺术 
图 像 来 说 ， 是 最 好 的 选择 ， 比 如 。8 位 PNG 格式 往往 比 GIF 图 像 更 高 效 。 然 而 GIF 支持 
动画 ，PNG 不 支持 。 

口 全 彩 图 像 一 一 只 有 全 彩 PNG 格式 和 无 损 版 本 的 WebP 格式 支持 256 种 以 上 颜色 。 两 者 都 
支持 全 Alpha 透明 度 ， 最 高 支持 1670 万 色 。 全 彩 PNG 格式 比 WebP 受到 更 广泛 的 支持 。 
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这 些 图 像 类 型 广泛 适用 于 图 标 和 照片 ， 但 它们 的 无 损 特 性 意味 着 ， 除 非 必须 全 透明 ， 否 
则 照片 内 容 通常 最 好 保留 为 JPEG 格式 。 
无 损 图 像 格式 的 效果 取决 于 图 像 的 主题 。 图 5-7 给 出 了 无 损 图 像 压缩 方法 的 广义 比较 。 


未 压缩 8 位 PNG/GIF 全 彩 PNG 无 损 WebP 
(269 KB) (26 KB) (51 KB) (140 KB) 


图 5-7 无 损 图 像 压 缩 方法 的 比较 。 未 压缩 、 全 彩 PNG 和 WebP 版 本 之 间 的 差异 是 不 可 
察觉 的 ， 而 8 位 无 损 图 像 则 被 量化 为 256 色 。 图 像 来 源 : 美国 国家 航空 航天 局 
喷气 推进 实验 室 


各 种 无 损 格 式 在 某 些 类 型 的 内 容 中 有 优势 ， 并且 完 全 适用 于 线条 艺术 、 图 像 学 和 摄影 。 要 想 
找到 合适 方法 ,需要 进行 实验 , 但 是 基本 的 使 用 规则 一 般 很 简单 :颜色 少 的 简单 图 像 应 该 使 用 8 
位 无 损 格 式 ; 不 适合 有 损 格 式 或 需要 完全 透明 的 图 像 应 使 用 全 彩 PNG 格式 。 

下 一 节 将 介绍 与 光栅 图 像 完全 不 同 的 图 像 类 别 : 可 缩放 矢量 图 形 。 


5.2.2 ”使 用 SVG 图 像 


Web 上 使 用 的 另 一 种 图 像 格式 是 可 缩放 矢量 图 形 ( Scalable Vector Graphics，SVG )。SVG 是 
一 种 矢量 图 格式 。 与 光栅 图 像 不 同 , 它们 由 数学 计算 的 形状 和 大 小 组 成 ,所 以 可 以 缩放 到 任何 大 
小 ， 如 图 5-8 所 示 。 


图 5-8 一 幅 漫 画 矢 量 图 的 不 同 大 小 。 请 注意 ， 较 大 的 图 形 并 没有 因为 被 放大 而 损失 任 
何 视觉 效果 。 这 是 矢量 图 之 于 光栅 图 最 大 的 优势 所 在 
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矢量 图 因 其 泻 染 方式 而 缩放 得 非常 好 。 尽 管 所 有 设备 屏幕 都 是 像素 驱动 的 , 因而 所 有 的 显示 
输出 最 终 也 以 像素 表示 , 但 矢量 图 像 显 示 在 屏幕 上 时 依然 会 经 历 一 个 不 同 于 光栅 图 像 的 过 程 。 它 
们 被 解析 ,并 且 评 估 数 学 属性 ,然后 通过 一 个 称 为 光栅 化 的 过 程 映射 到 基于 像素 的 显示 。 每 次 图 
像 缩 放 时 都 会 发 生 这 种 情况 ， 以 确保 所 有 显示 的 最 佳 视觉 完整 性 。 

如 果 你 熟悉 矢量 图 的 创建 ， 那 么 一 定 熟悉 Adobe Illustrator 等 程序 。 尽 管 这 些 程序 的 本 地 文 
件 格式 是 用 二 进 制 表 示 的 , 但 SVG 格式 是 用 XML 表示 的 ，XML 是 一 种 文本 格式 。SVG 的 媒体 
类 型 image/svg+xml 反映 了 它 是 基于 XML 的 。 此 特性 允许 你 在 文本 编辑 器 中 编辑 SVG 文件 、 
将 SVG 文件 内 联 到 HTML ， 甚 至 可 以 在 SVG 文件 中 使 用 CSS 和 媒体 查询 。 

尽管 SVG 自 1999 年 以 来 一 直 是 W3C 标准 ， 但 近 几 年 才 应 用 到 网 站 中 。SVG 可 以 在 不 同 的 
设备 分 辨 率 和 显示 密度 之 间 完 美 地 工作 ， 这 使 它 成 为 一 种 流行 的 图 像 格式 。 

然而 SVG 并 不 是 杀手 铜 ， 它 的 应 用 也 受到 了 限制 。SVG 图 像 不 适用 于 照片 ， 它 在 用 于 描述 
logo、 图 标 或 线条 艺术 时 最 有 效 。 这 种 灵活 的 图 像 格式 可 以 良好 适 配 纯色 和 几何 形状 的 图 像 。 


5.2.3 ”选择 图 像 格式 


当 所 有 图 像 类 型 都 可 用 时 , 很 难 判断 哪 种 类 型 对 某 种 内 容 最 合适 。 虽 然 天 量 图 像 是 一 个 独立 
的 类 别 , 但 SVG 是 主流 格式 , 而 光栅 图 像 分 为 两 类 ( 有 损 压 缩 和 无 损 压 缩 ) 它们 又 有 多 种 格式 。 
通过 表 5-1， 你 可 以 了 解 最 适合 每 种 图 像 类 型 的 内 容 类 型 。 


表 5-1 你 可 以 根据 网 站 的 内 容 类 型 选择 图 像 格式 。 每 种 图 像 格 式 在 颜色 限制 、 图 像 类 型 和 
压缩 类 别 方面 都 有 所 不 同 〈 全 色 表 示 1670 万 或 更 多 颜色 ，24/32 位 ) 


图 像 格式 颜色 图 像 类 型 压缩 最 适合 的 内 容 类 型 
PNG 全 色 光栅 区 无 损 可 能 需要 ( 也 可 能 不 需要 ) 全 部 颜色 的 内 容 。 质 量 损失 是 不 


可 接受 的 ， 或 内 容 要 求 完 全 透明 。 可 适应 任何 内 容 类 型 ,但 
不 能 像 JPEG 那样 压缩 照片 


PNG (8 位 ) 256 光栅 医 无 损 不 需要 全 部 颜色 ， 但 可 能 需要 1 位 透明 度 的 内 容 ， 比 如 图 标 
和 像素 艺术 

GIF 256 光栅 区 无 损 与 8 位 PNG 相同， 压缩 性 能 稍 低 ， 但 支持 动画 

JPEG 全 色 光栅 医 有 损 需要 全 部 颜色 的 内 容 , 质量 损失 和 缺乏 透明 度 是 可 以 接受 的 ， 
例如 照片 

SVG 全 色 矢量 医 未 压缩 ”可 能 需要 (也 可 能 不 需要 ) 全 套 颜色 的 内 容 ， 缩 放 时 质量 损 


失 是 不 可 接受 的 。 最 好 是 线条 艺术 、 图 表 和 其 他 非 摄 影 内 容 。 
不 必 通 过 大 量 开发 来 优化 所 有 设备 上 的 显示 


WebP (有 损 ) ”全 色 光栅 区 有 损 与 JPEG 相同 ， 但 也 支持 完全 透明 ， 有 可 能 获得 更 好 的 压缩 
性 能 
WebP (无 损 ) ”全 色 光栅 区 无 损 与 全 彩 PNG 相同 ， 具 有 更 好 的 压缩 性 能 


下 一 节 将 使 用 CSS 优化 网 站 项 部 图 像 的 传输 。 
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5.3 CSS 中 的 图 像 传输 


CSS 中 的 图 像 传 输 是 一 个 很 好 的 始点 ， 因 为 它 涉及 CSS 属性 和 功能 。 如 果 开 发 过 响应 式 网 
站 ， 你 一 定 很 熟悉 这 些 属性 和 功能 。 用 于 正确 传输 图 像 的 主要 CSS 功能 是 媒体 查询 。 

这 一 次 我 们 将 优化 “传奇 音调 ”网 站 的 顶部 图 像 的 传输 ,第 1 章 介 绍 过 这 个 网 站 ， 该 网 站 向 
吉他 手 发 布 感 兴趣 的 文章 。 这 个 网 站 的 图 像 管理 不 善 ,， 导致 大 屏幕 上 的 图 像 质量 低下 。 你 希望 向 
这 些 用 户 提供 更 高 质量 的 图 像 , 但 又 希望 无 论 用 户 使 用 何 种 设备 都 不 会 负担 过 大 的 图 像 。 你 还 想 
确保 具有 高 DPI 显示 需 的 用 户 在 屏幕 上 获得 尽 可 能 好 的 体验 。 

首先 下 载 这 个 网 站 并 在 本 地 运行 。 为 此 ， 需 要 在 所 选 文件 夹 中 执行 以 下 命令 : 

git clone https://github.com/webopt/ch5-responsive-images.git 

cd ch5-responsive-images 


npm install 
node http.js 


网 站 下 载 完成 后 ， 可 以 在 本 地 计算 机 上 打开 http:/localhost:8080。 网 站 应 该 如 图 5-9 所 示 。 5 
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YourSourcelifor Great Guitar Tone 
GUITARS AMPS EFFECTS TONE TIPS 


GUITAR EQ TIPS 


We do get quite a lot of e-mails from folks asking about how they should set their tone controls 
on their amps and/or pedals. In fact, this "how should | set things?" question is the number one 
question we get here. 


As a result, | thought the time was right to discuss equalization in general and offer some EQ 
tips. Much of this information comes from mv own vears of trial and error as well as from the 


图 5-9 在 浏览 带 中 显示 的 “传奇 音调 ”网 站 


网 站 在 本 地 计算 机 上 运行 时 , 你 可 以 通过 分 割 图 像 ， 并 根据 设备 宽度 、 设 备 DPI 以 及 在 CSS 
中 使 用 SVG 的 方式 ， 形 成 目标 屏幕 上 的 显示 计划 。 


5.3.1 ”使 用 媒体 查询 在 CSS 中 适 配 显示 器 


本 节 的 目标 是 , 通过 使 用 img 文件 夹 提供 的 背景 图 像 ,为 所 有 设备 创建 最 佳 体验 ， 从 而 提高 
“传奇 音调 ”网 站 顶部 图 像 的 视觉 质量 。 
使 用 CSS 实现 响应 式 图 像 时 ， 最 好 的 工具 是 媒体 查询 。 通 过 媒体 查询 ， 可 以 决定 为 哪 种 屏 
宽度 改变 特定 选择 器 的 background-image 规则 。 
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响应 式 图 像 


在 “传奇 音调 ”网 站 上 ， 只 有 一 个 选择 器 #masthead 设置 了 background-image 属性 。 它 
设置 页 面 项 部 的 样式 ， 页 面 项 部 有 一 个 大 的 背景 图 像 、logo 和 网 站 标语 。 此 选择 器 的 CSS 如 代 
码 清单 5-1 所 示 。 


代码 清单 5-1 


“传奇 音调 ” 网 站 的 #masthnead 样式 


actoeact 确保 无 论 容器 大 小 如 
padding: .5rem 0 0; 何 ， 背景 图 像 都 能 覆盖 
height: 10rem:; 整个 容器 
background-size: cover; 


background-position: 50% 50%; 


posit 


} 


masthea 


small .jpg。 妇 


background-image: url("../img/masthead-xxxsmall.jpg"); " 


顶部 图 像 默 认 
为 移动 优先 


ion: relative; 


d 元 素 横 跨 浏览 器 窗口 的 宽度 ,其 background-image 值 为 mastheadxxx- 
[0 果 在 大 屏幕 上 加 载 这 个 网 站 , 你 会 立即 注意 到 背景 图 像 的 视觉 质量 有 多 差 。 这 是 


因为 默认 样式 是 移动 优先 的 ， 所 以 为 移动 设备 提供 最 小 图 像 。 


下 面 总 结 


img 文件 夹 中 的 图 像 ， 其 中 包含 一 组 顶部 背景 图 像 ， 你 可 以 将 这 些 图 像 插 入 


#masthead 的 媒体 查询 临界 点 。 表 5-2 列 出 了 这 些 图 像 及 其 目标 媒体 查询 。 


表 5-2 网 站 CSS 中 的 图 像 、 分 状 率 和 目标 媒体 查询 临界 点 


图 像 名 称 图 像 分 辩 率 媒体 查询 
masthead-xxxsmall.jpg 320 x 135 无 (默认 图 像 ) 
masthead-xxsmall.jpg 640 x 269 (min width: 30em) 
masthead-xsmall.jpg 768 x 323 (min width: 44em) 
masthead-small.jpg 1024 x 430 (min width: 56em) 
masthead-medium.jpg 1440 x 604 (min width: 77em) 
masthead-large.jpg 1920 x 805 (min width: 105em) 
masthead-xlarge.jpg 2560 x 1073 (min width: 140em) 
masthead-xxlarge.jpg 3840 x 1609 未 使 用 

如 你 所 见 ， 每 个 图 像 都 属于 一 个 特定 的 设备 分 辨 率 范围 ， 可 在 不 拉 伸 到 像素 化 的 情况 下 进 


行 缩放 。 第 一 张 图 像 ，masthead-xxxsmall.jpg 从 320 像素 的 宽度 开始 ,一 直 拉 伸 到 479 像素 。 在 
480 像素 的 临界 点 处 , 640 像素 版 本 的 图 像 开 始 生 效 , 并 放大 到 703 像素 的 宽度 。 在 704 像素 处 ， 


一 个 新 的 临界 点 出 现 ， 一 个 更 高 分 辨 率 的 图 像 被 奉 换 。 这 一 直 持续 到 最 大 分 辩 率 为 止 。 请 注意 ， 
目前 还 没有 使 用 masthead-xxlarge.jpg 文件 。 稍 后 关注 高 DPI 屏幕 时 才 会 用 到 它 ， 现 在 可 以 忽略 。 


从 文本 编辑 器 打开 css 文件 夹 中 的 styles.css 文件 。 注 意 ， 它 是 移动 优先 的 示例 ,文件 底部 存 
在 大 量 媒体 查询 。 这 些 媒 体 查询 中 的 样式 用 于 更 改 网 站 的 大 小 、 网 站 标语 副本 和 项 部 容 需 


的 高 度 。 在 第 183 行 480px (或 30em， 因 为 使 用 的 是 em 而 不 是 像素 ) 设置 的 第 一 个 临界 点 如 
代码 清单 5-2 所 示 。 
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代码 清单 5-2 媒体 查询 临界 点 


@media screen and (min-width: 30em){ /* 480px/16px */ 
480 像素 宽屏 幕 


#mastheadt{ 
height: 12rem; 的 媒体 查询 


在 这 个 和 后 卖 的 临界 
点 需要 添加 背景 图 像 
#1logo{ 的 元 素 
width: 70% eS 
} 
#taglinetf 


font-size: 1.25rem; 
} 
} 
我 们 希望 这 段 代 码 能 够 用 来 修改 #4masthead 选择 器 的 内 容 ， 以 便 在 该 临界 点 启动 时 ， 提 供 
比 masthead-xxxsmall.jpg 的 分 辩 率 更 高 的 背景 图 像 。 因 此 ， 继 续 操 作 并 将 #mastheaq 选择 器 的 


内 容 更 改 为 : 5 


#mastheadt{ 
height: 12rem; 
background-image: url("../img/masthead-xxsmall.jpg"); 


} 
为 新 图 像 添加 background-image 属性 后 ， 保 存 文档 并 重新 加 载 页 面 。 然 后 观察 图 像 质 量 
的 改善 情况 ， 如 图 5-10 所 示 。 


”i < 
民 、_ a  ， 


添加 背景 图 像 之 前 添加 背景 图 像 之 后 


Pr” ee > y 4 i 
a Your SoUrce or Great Guitar ~ Your sot Or Great Guitar itone, 


加 斑 紊 
图 5-10 顶部 背景 图 像 在 480 像素 (30em ) 临界 点 的 显示 ， 其 中 左边 为 添加 新 背景 图 
之 前 ,右边 为 添加 新 背景 图 之 后 。 可 以 注意 到 后 者 的 图 像 视 觉 质量 上 提高 了 


接 下 来 要 做 的 就 是 对 表 5-2 中 列 出 的 每 个 临界 点 重复 这 个 过 程 。 完 成 后 应 该 能 得 到 自 适 应 的 
顶部 背景 图 片 ， 从 手机 的 分 辩 率 一 直 适 配 到 大 的 桌面 设备 分 辨 率 。 


EE: 


想 要 跳 过 ? 
如 果 你 陷入 困境 或 者 想 要 跳 过 直接 以 查看 最 终 效果 ， 可 以 使 用 git 切换 到 项 目的 完成 状 
态 并 查看 代码 。 在 命令 行 中 输入 git checkout responsive-images -f 即 可 跳 过 。 如 果 
有 任何 更 改 要 保留 ， 请 确保 先 备份 。 
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下 一 节 将 学 习 如 何 针对 高 DPI 显示 器 , 并 使 用 媒体 查询 向 那些 屏幕 更 强 的 设备 提供 更 高 分 辨 
率 的 图 像 。 
5.3.2 ”通过 媒体 查询 适 配 高 DPI 显示 器 


要 实现 响应 式 图 像 ， 必 须 兼 容 高 DPI 显示 器 (如 4K 和 5K 超 高 清 显示 器 )。 众 所 周知 ， 蔷 果 
公司 的 视网膜 显示 器 就 是 这 种 技术 的 一 个 例子 , 但 这 种 技术 当然 不 局 限于 苹果 设备 。 现 在 大 多 数 
设备 带 有 可 视 为 高 DPI 的 屏幕 。 从 我 们 的 顶部 图 片 可 以 看 到 标准 DPI 显示 需 与 高 DPI 显示 器 的 
比较 ， 如 图 5-11 所 示 。 


BAVA AN ee 


图 5-11 标准 显示 器 与 高 DPI 显示 器 上 的 图 形 放大 视觉 表示 


高 DPI 显示 器 提供 了 增强 的 视觉 体验 , 但 给 开发 者 带 来 了 新 的 挑战 :如 何 高 效 传递 这 些 图 像 。 
图 5-12 比较 了 正确 传输 到 这 些 显 示 噩 上 的 图 像 。 


标准 DPI 高 DI 

图 5-12 ”两 个 版 本 背景 图 像 的 比较 ， 对 应 两 种 显示 器 类 型 。 左 侧 : 用 于 标准 显示 器 的 
背景 图 像 显示 在 高 DPI 显示 器 上 。 右 侧 : 适当 的 分 辩 率 图 像 用 于 高 DPI 显示 
器 ， 创 建 了 更 好 的 视觉 体验 


我 们 之 前 实现 了 针对 i#mastheag 元 素 的 背景 图 像 ， 但 这 次 针对 的 是 高 DPI 屏幕 。 这 不 仅 要 
像 以 前 那样 针对 设备 宽度 , 还 要 针对 结合 媒体 查询 的 像素 密度 。 下 面 是 一 个 基本 的 高 DPI 屏幕 媒 
体 查询 示例 : 

@media screen (-webkit-min-device-pixel-ratio: 2), 


(min-resolution: 192dpi)f{ 


/* 在 此 放置 高 DPI 样式 */ 


} 

我 们 在 此 实际 看 到 两 个 媒体 查询 : 带 有 浏览 器 供应 商 前 缀 的 -webkit-min-device-pixel- 
ratio 媒体 查询 是 WebKit 实现 的 兼容 旧 浏 览 器 的 高 DPI 显示 支持 ， 而 min-resolution 媒体 
查询 用 于 现代 浏览 器 支持 (虽然 较 新 的 浏览 器 往往 也 识别 浏览 器 供应 商 前 绿 媒 体 查 询 )。 
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-webkit-min-device-pixel-ratio 媒体 查询 会 检查 像素 密度 的 简单 比率 ， 其 中 比率 1 
相当 于 96DPI。 这 种 情况 下 ， 在 下 载 更 高 分 辩 率 的 图 像 之 前 ， 你 要 确保 显示 器 的 像素 密度 至 少 为 
192DPI。 而 min-resolution 媒体 查询 则 采用 更 直接 的 值 192qpi。 

此 时 , 需要 为 每 个 新 的 临界 点 指定 正确 的 背景 图 像 。 这 意味 着 要 重新 设计 表 5-2 中 的 背景 图 
像 ， 以 调整 tmasthead 元 素 在 高 DPI 屏幕 上 的 背景 


表 5-3 #masthead 选择 器 在 CSS 中 的 背景 图 像 ， 及 其 对 应 的 分 辨 率 和 高 DPI 屏幕 的 媒体 查询 


图 像 。 表 5-3 是 调整 后 的 结果 。 


图 像 名 称 图 像 分辨 率 标准 DPI 媒体 查询 高 DPI 媒体 查询 
masthead-xxxsmalljpg 320 x 135 无 (默认 ) 未 使 用 
masthead-xxsmall.jpg 640 x 269 (min-width: 30em) (-webkit-min-device-pixel-ratio: 2) 
(min-resolution: 192dpi) 
masthead-xsmall.jpg 768 x 323 (min-width: 44em) (-webkit-min-device-pixel-ratio: 2) 
(min-resolution: 192dpi), and (minwidth: 
30em) 
masthead-small.jpg 1024 x 430 (min-width: 56em) (-webkit-min-device-pixel-ratio: 2) 
(min-resolution: 192dpi), and (minwidth: 
44em) 
masthead-medium.jpg 1440 x 604 (min-width: 77em) @media screen (-webkit-min-devicepixel- 
ratio: 2), (min-resolution: 
192dpi), and (min-width: 56em) 
masthead-large.jpg 1920 x 805 (min-width: 105em) @media screen (-webkit-min-devicepixel- 
ratio: 2), (min-resolution: 
192dpi), and (min-width: 77em) 
masthead-xlarge.jpg 2560 x 1073 (min-width: 140em) @media screen (-webkit-min-devicepixel- 
ratio: 2), (min-resolution: 
192dpi), and (min-width: 105em) 
masthead-xxlarge.jpg 3840 x 1609 未 使 用 (-webkit-min-device-pixel-ratio: 2)， 
(min-resolution: 192dpi), and (minwidth: 
140em) 


比较 表 5-3 与 表 5-2， 二 者 看 起 来 很 相似 ， 只 是 每 个 图 像 都 被 上 移 了 ， 这 样 高 分 辨 率 的 图 像 


就 可 以 用 于 较 小 的 屏幕 宽度 。 你 可 能 还 记得 ,masthead-xxxsmall.jpg 被 用 作 顶 部 的 默认 背景 图 像 。 
对 于 更 高 分 辨 率 的 屏幕 ， 它 已 经 被 提升 为 下 一 个 更 大 的 图 像 ， 即 masthead-xxsmalljpg。 标 准 DPI 


显示 器 没有 使 用 masthead-xxlarge.jpg 图 像 。 而 此 图 像 现在 已 用 在 最 大 临界 点 , 以 覆盖 大 屏幕 设备 
上 的 高 DPI 显示 器 。 

要 想 开 始 使 用 高 分 辨 率 的 背景 图 像 ， 请 在 styles.css 中 找到 高 DPI 媒体 查询 的 开头 。 你 将 从 
280 行 开 始 看 到 一 个 媒体 查询 ， 如 下 所 示 : 


(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi){ /* 高 DPI 默认 状态 */ 
#mastheadt{ 

} 


@media screen 


} 


此 媒体 查询 与 移动 优先 的 样式 类 似 , 只 是 它 定 义 了 高 DPI 屏 幕 上 的 页 面 的 默认 样式 。 在 此 媒 
体 查询 中 ， 需要 更 改 #masthead 选择 器 的 内 容 ， 以 包含 新 的 background-image 属性 : 
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#masthead{ 
background-image: url("../img/masthead-xxsmall .jpg"); 


} 


完成 修改 后 , 质量 很 明显 提高 了 ， 如 图 5-12 所 示 。 完 成 此 调整 后 ， 只 需 遍 历 表 5-3 中 的 图 像 
列表 ， 并 将 它们 应 用 于 各 自 的 媒体 查询 。 


想 要 跳 过 ? 
如 果 你 陷入 困境 或 者 想 要 跳 过 以 直接 查看 最 终 效 果 ， 可 以 使 用 git 切换 到 项 目的 完成 状 
态 并 查看 代码 。 跳 转 到 运行 的 网 站 目录 ,并 在 命令 行 输入 git checkout hi-dpi-images -f 
即 可 。 如 果 你 有 任何 更 改 要 保留 ， 请 确保 先 备 份 。 


下 一 节 将 讲解 如 何在 CSS 中 使 用 SVG 图 像 ， 并 体会 到 在 向 所 有 类 型 的 显示 顺 提 供 高 分 辨 率 
图 像 时 ， 矢 量 图 像 格式 相 比 于 光栅 图 像 的 优势 。 


5.3.3 在 CSS 中 使 用 SVG 背景 图 像 


有 时 ， 在 背景 图 像 中 使 用 SVG 可 能 更 好 ， 这 取决 于 图 像 的 内 容 。 如 前 所 述 ， 如 果 有 一 个 包 
含 很 多 线条 艺术 的 图 像 ， 那 么 使 用 SVG 就 很 完美 。 在 CSS 中 使 用 这 些 图 像 类 型 时 ， 不 需要 通过 
媒体 查询 在 所 有 分 辨 率 和 显示 密度 之 间 完 美 显示 图 像 。 

在 img 文件 夹 中 ， 找 到 名 为 masthead.svg 的 SVG 文件 。 在 文本 编辑 器 中 打开 styles.css， 转 
到 第 66 行 的 t+masthead 选择 器 , 并 将 此 选择 器 中 的 packground-image 属性 修改 为 以 下 内 容 : 


background-image: url("../img/masthead.svg"); 


然后 从 第 180 行 开始 , 删除 文档 中 的 所 有 媒体 查询 , 使 这 些 媒体 查询 中 的 背景 图 像 覆 盖 不 会 
窗 盖 你 设置 的 SVG 背景 。 进 行 这 些 修改 后 ,保存 并 重新 加 载 页 面 ， 以 查看 新 的 背景 图 像 。 
新 的 SVG 生效 时 , 调整 窗口 大 小 , 并 观察 图 像 在 所 有 分 状 率 下 如 何 完 美 地 缩放 ,这 就 是 SVG 
文件 在 实际 应 用 中 的 主要 优势 。 无 须 媒 体 查 询 ， 图 像 可 在 所 有 设备 宽度 和 屏幕 类 型 以 及 高 DPI 
或 其 他 情况 下 正确 缩放 。 

需要 再 次 强调 的 是 , 这 种 图 像 类 型 并 非 适合 于 所 有 类 型 的 内 容 。JPEG 和 全 彩 PNG 文件 更 适 
合照 片 ， 而 SVG 最 适合 用 于 logo、 线 条 艺术 和 图 案 等 内 容 。 如 果 有 疑惑 ， 可 以 先 试 试 SVG。 一 
定 要 注意 文件 大 小 ,看 看 它 在 预期 的 设备 上 是 否 高 效 。 如果 较 小 的 光栅 图 可 以 更 好 地 为 用 户 服 务 ， 
请 考虑 切换 到 光栅 图 。 如 果 图 像 内 容 非常 适合 SVG 格式 ， 那 么 SVG 通常 是 最 高 效 的 。 

下 一 节 介绍 在 HTML 中 实现 响应 式 图 像 的 各 种 技术 。 


5.4 在 HTML 中 传输 图 像 


虽然 CSS 可 以 以 响应 式 的 方式 管理 图 像 ， 但 是 它 不 能 解决 从 HTML 引用 图 像 时 使 图 像 具 备 
响应 性 的 问题 。 自 从 HTML 诞生 以 来 ，<img> 标 签 一 直 是 Web 上 图 像 的 载体 。 因 为 响应 式 Web 
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设计 无 处 不 在 ， 所 以 在 HTML 中 使 用 图 像 时 ， 应 该 有 一 个 使 图 像 具 有 响应 性 的 解决 方案 。 

本 节 将 讲解 在 HTML 中 使 用 响应 式 图 像 的 两 种 方法 ， 这 两 种 方法 对 于 不 同 的 场景 都 是 有 用 
的 。 它 们 分 别 是 <picture> 元 素 和 <img> 标 签 的 srcset 属性 。 虽 然 这 些 特性 是 HTML 特有 的 ， 
但 并 非 在 所 有 浏览 器 中 都 得 到 了 支持 , 所 以 还 需 学 习 如 何在 不 支持 它们 的 旧 浏 览 器 中 为 这 些 功能 
提供 polyfill。 

然而 在 开始 之 前 ， 必 须 介 绍 一 个 重要 的 CSS 规则 ， 应 该 将 其 添加 到 样式 表 。 


5.4.1 图 像 的 全 局 max-wiath 规 则 
对 于 任何 一 个 网 站 , 不 管 是 否 为 响应 式 网 站 , CSS 中 都 应 该 有 一 个 规则 , 如 代码 清单 5-3 所 示 。 
代码 清单 5-3 ”对 所 有 img 元 素 设置 的 全 局 max-wiatnh 规则 


img{ 


max-width: 100%; 
} 


这 条 简洁 的 规则 有 很 多 好 处 ， 其 一 是 使 任何 <img> 元 素 都 泻 染 为 其 自然 宽度 〈 除非 超过 容 5 
器 )。 超 过 容器 宽度 时 ， 这 条 规则 会 将 图 像 宽 度 限 制 为 容 髓 的 宽度 ， 如 图 5-13 所 示 。 


<Lmg> 


<EMg> 


未 应 用 max-width 规 则 应 用 max-width 规 则 
图 5-13 应 用 max-width 规则 前 后 的 图 像 行为 。 左 侧 示例 是 默认 行为 : 如 果 图 像 宽度 
大 于 其 容器 ， 将 超出 边界 ; 右 侧 是 max-wiath 为 100% 的 图 像 ， 它 将 图 像 压 
缩 到 容器 的 宽度 


有 了 这 条 规则 ， 即 可 确保 图 像 的 行为 与 通常 一 样 ， 除 非 它 们 比 其 父 容 器 大 。 有 了 这 个 坚实 的 
起 点 ， 下 面 可 以 真正 在 HTML 中 使 用 响应 式 图 像 了 。 


5.4.2 使 用 srcset 


显示 响应 式 图 像 的 方法 之 一 ， 是 在 <img> 标 签 中 使 用 名 为 srcset 的 HTML5 特性 。<img> 
标签 的 这 个 可 选 属性 不 是 替换 src 属性 ， 而 是 对 其 进行 补充 。 
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1. 使 用 srcset 具体 说 明 图 像 
使 用 srcset 的 示例 如 下 所 示 : 
<img src="image-small.jpg" 


srcset="image-medium.jpg 640w, 
image-large.jpg 1280w"> 


在 这 个 例子 中 ，src 属性 用 于 默认 图 像 。 在 移动 优先 网 站 ,默认 图 像 应 该 是 图 像 集合 中 最 小 


的 。 这 对 不 支持 srcset 的 浏览 器 起 到 了 回 退 的 作用 。 此 处 的 srcset 属性 引用 两 个 高 分 辩 率 图 
像 (在 前 面 的 示例 中 为 粗 体 )。 srcset 属性 的 格式 是 图 像 URL 和 图 像 宽 度 ， 由 空格 分 隔 。 图 像 
名 称 采用 <img> 标 签 的 src 属性 中 常用 的 格式 , 宽度 使 用 后 级 w 表示 。 例如 ,宽度 为 512 像素 的 


图 像 将 表示 为 512w。 可 以 添加 其 他 图 像 和 尺寸 ， 只 需 用 逗号 分 开 ! 


srcset 的 优点 是 ， 它 不 需要 媒体 查询 就 可 以 工作 。 浏 览 器 获取 给 定 的 信息 ， 并 根据 视 口 的 
当前 状态 选择 最 适合 的 图 像 。 在 给 定 <img> 标 签 中 所 有 图 像 具 有 相同 的 处 理 方式 但 长 宽 比 不 同 的 
情况 下 , 使 用 srcset 非常 适合 。 这 一 点 很 重要 。 如 果 提 供 的 图 像 的 长 宽 比 不 同 , 则 srcset 不 


下 进行 不 同 处 理 ， 那 么 可 以 在 CSS 中 使 用 媒体 查询 ， 或 者 直接 阅读 <picture> 元 素 。 


是 很 适用 , 并 且 会 产生 意 想不到 的 结果 。 如 果 需 要 一 种 响应 式 图 像 方法 ， 以 便 在 不 同 的 屏幕 大 小 


本 节 将 继续 图 像 传 输 的 优化 工作 ， 并 在 “传奇 音调 ”网 站 上 为 文章 图 像 实现 srcset。 但 首 


先 ， 需要 使 用 git， 将 网 站 的 工作 副本 更 新 到 一 个 新 的 分 支 。 为 此 ， 请 运行 以 下 命令 : 


git checkout srcset -f 


接 下 来 ,可 以 在 文本 编辑 器 中 打开 index.html, 看 到 第 26 行 添加 了 一 个 新 功能 的 图 像 。 如 果 


在 浏览 器 中 导航 到 该 网 站 ， 将 看 到 如 图 5-14 所 示 的 内 容 。 


HOME GUITARS AMPS EFFECTS TONE TIPS 


GUITAR EQ TIPS 


We do get quite a lot of e-mails from folks asking about how they should set their tone controls on their amps and/or pedals. 


In fact, this "how should | set things?" question is the number one question we get here. 
人 Ab 
一 


As a result, | thought the time was right to discuss equalization in general and offer some EQ tips. Much of this information 
comes from my own years of trial and error as well as from the valued insight of others. Even all these years later, | continue 
to learn from various people, mostly on the Internet these days, and of course | still experiment. | hope you find this 
information useful! 


图 5-14 “传奇 音调 ”网 站 上 出 现 的 新 功能 图 像 


图 像 


5-14 中 显示 的 带 注解 功能 的 图 像 保 存在 img 文件 夹 中 , 文件 名 是 amp-xsmalljpg。 网 站 现 
阶段 的 目标 是 ,将 这 个 图 像 扩展 到 容器 的 宽度 ， 同 时 保持 合理 的 分 辨 率 。 开 始 使 用 srcset 实现 
目标 之 前 ， 盘 点 img 文件 夹 中 的 图 像 及 其 宽度 ， 以 便 设置 srcset 属性 的 值 。 清 单 详 见 表 5-4。 
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表 5-4 网 站 img 文件 夹 中 的 图 像 及 其 宽度 的 清单 ， 它 们 将 用 于 srcset 属性 


图 像 名 称 图 像 宽度 像素 ) 
amp-xsmall.jpg 320w (已 经 在 src 属性 中 引用 ) 
amp-small.jpg 512w 
amp-medium.jpg 768w 
amp-large.jpg 1280w 


根据 表 5-4 中 的 信息 ， 就 可 以 构建 srcset 属性 的 内 容 。 在 index.html 的 第 26 行 ， 将 <img> 
标签 更 改 为 以 下 内 容 : 


<img src="img/amp-xsmall.jpg" class="articleImageFull" 
srcset="img/amp-small.jpg 512w, 
img/amp-medium.jpg 768w, 
img/amp-large.jpg 1280w"> 


使 用 这 个 srcset 值 ,你 将 拥有 一 个 兼容 浏览 器 中 所 有 临界 点 的 功能 图 像 。 它 最 好 的 一 点 是 ， 
你 不 必 编 写 任何 媒体 查询 来 实现 这 一 点 。 浏 览 器 会 尽 其 所 能 做 出 最 佳 选择 ， 并 完成 所 有 工作 。 

在 优化 方面 ，srcset 是 高 效 的。 这 是 因为 浏览 器 只 会 下 载 最 佳 视觉 质量 所 需 的 内 容 。 本 例 
中 ， 如 果 在 大 屏幕 上 加 载 页 面 ， 浏 览 需 将 加 载 amp-large.jpg; 但 如 果 缩 小 页 面 ， 浏 览 需 将 不 会 请 
求 amp-medium.jpg、amp-smalljpg 等 。 浏 览 器 将 调整 已 经 加 载 的 图 像 ， 这 可 以 防止 不 必要 的 图 像 
资源 获取 。 优 化 成 功 ! 

如 果 以 较 小 的 屏幕 加 载 页 面 并 放大 ,浏览 需 将 下 载 所 需 内 容 ， 以 确保 良好 的 图 像 质量 。 所 以 
鱼 与 能 掌 可 以 兼 得 。 一 言 以 蔽 之 : srcset 只 在 需要 时 获取 它 需 要 的 东西 。 


2. 使 用 size 控制 粒度 

你 可 能 需要 比 srcset 所 能 提供 的 更 大 的 灵活 性 。 也 许 需 要 图 像 根 据 屏幕 的 宽度 改变 大 小 ， 
而 这 就 是 size 属性 的 用 途 。 

size 属性 与 srcset 一 样 ， 也 用 于 <img> 标 签 。 它 接受 一 组 媒体 查询 和 宽度 。 媒 体 查 询 与 
典型 的 CSS 媒体 查询 一 样 ， 定 义 了 图 像 应 该 更 改 的 临界 点 。 媒 体 查询 起 作用 时 ， 它 后 面 的 宽度 
设置 图 像 应 显示 的 宽度 。 这 些 媒体 查询 和 图 像 大 小 可 以 通过 去 号 分 隔 成 多 对 使 用 。 示 例如 下 : 

<img src="image-small.jpg" 


srcset="image-medium.jpg 640w, image-large.jpg 1280w" 
sizes="(min-width: 704px) S50vw, 100vw"> 


本 例 中 ，size 属性 的 内 容 有 两 个 作用 。 在 704 像素 和 更 宽 的 屏幕 上 ， 指 示 图 像 占据 视 口 宽 
度 的 50%。 要 告诉 浏览 器 这 一 点 ， 可 以 使 用 视 口 宽度 (vw ) 单位 ， 即 视 口 当前 宽度 的 百分比 。 
之 后 的 下 一 个 逗号 分 隔 规 则 (不 带 媒体 查询 ) 是 图 像 的 默认 宽度 。 如 果 媒 体 查 询 都 不 匹配 ， 将 指 
示 图 像 填 充 整个 视 口 。 由 于 max-wigdth: 100% 规 则 (如 前 所 述 ) 在 所 有 图 像 上 起 作用 ， 所 以 图 
像 永远 不 会 超过 其 容器 的 宽度 。 要 亲自 尝试 size 属性 , 请 将 index.html 第 26 行 的 <img> 标 签 更 
改 为 以 下 内 容 : 
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<img src="img/amp-xsmall.jpg" class="articleImageFull" 
srcset="img/amp-small.jpg 512w, 
img/amp-medium.jpg 768w, 
img/amp-large.jpg 1280w" 
sizes="(min-width: 704px) S50vw, (min-width: 480px) 75vw, 100vw"> 


将 sizes 属性 添加 到 这 个 <img> 标 签 ， 图 像 行为 会 在 不 同 的 临界 点 中 受到 影响 ， 如 图 5-15 


所 示 。 
及 


question we get here. 


昌国 
四 一 


get here. 


图 5$-15 sizes 属性 对 Google Chrome 中 文章 图 像 的 影响 。 在 704 像素 断 点 处 ， 图 像 

占 视 口 的 50%; 在 480 像素 断 点 处 ， 图 像 占 视 口 的 75%; 低 于 480 像素 的 默 

认 图 像 行为 是 占据 整个 视 口 

更 改 之 后 ,调整 浏览 器 窗口 的 大 小 , 并 查看 图 像 在 媒体 查询 中 是 如 何 渐进 适应 视 口 的 。 与 其 

他 响应 式 图 像 方法 一 样 ， 调 整 会 产生 最 佳 结果 。 使 用 sizes 时 应 当 遵 循 的 一 条 规则 是 : 媒体 查 

询 应 该 与 CSS 中 使 用 的 内 容 一 致 。 你 可 以 修改 ， 但 一 定 要 测试 ， 测 试 ， 测 试 ! 

srcset( 和 可 能 的 sizes ) 通常 应 该 是 够 用 的 ， 但 在 某 些 情况 下 ， 你 可 能 需要 一 种 响应 式 

图 像 的 方法 ， 以 便 在 不 同 的 屏幕 上 进行 不 同 的 处 理 。 此 时 <picture> 元 素 就 会 派 上 用 场 。 


5.4.3 使 用 <picture> 元 素 


srcset 是 个 好 功能 ， 但 当 你 的 图 像 需 要 美术 设计 时 ， 它 就 显得 力不从心 了 。 美 术 设计 是 一 
种 应 用 于 响应 式 图 像 的 技术 , 指 的 是 为 不 同 的 屏幕 提供 不 同 的 裁剪 和 焦点 的 实践 。 例 如 ， 当 一 个 
针对 大 屏幕 的 图 像 对 于 较 小 的 屏幕 不 是 最 优 的 时 候 ， 就 可 以 这 么 做 。 图 5-16 是 一 个 美术 设计 的 
例子 ,我 把 我 有 些 神经 质 的 猫 作为 图 像 集 主角 。 
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图 5-16 一 个 跨 三 端的 美术 设计 例子 。 在 最 大 的 版 本 中 ， 主 角 有 更 多 的 上 下 文 和 周围 的 


Ue 
4 


方式 也 不 同 ， 


j 节 ， 因 为 较 大 的 屏幕 可 以 容纳 更 多 内 容 。 随 着 屏幕 宽度 的 减 小 ， 图 像 的 裁剪 


因此 主角 在 较 小 的 屏幕 上 仍然 可 见 


<img> 标 签 上 使 用 的 srcset 功能 不 适用 于 在 不 同 临界 点 中 需要 不 同 处 理 的 图 像 ， 因 为 它 要 
求 一 组 图 像 保持 相同 的 长 宽 比 ,。 而 <picture> 元 素 没有 这 样 的 要 求 , 它 可 以 在 定义 的 任何 转换 点 


显示 任何 图 像 。 


开始 学 习 如 何 使 用 <picture> 元 素 之 前 ， 需 要 使 用 git 切换 到 网 站 代码 的 新 分 支 。 如 果 有 
想 保 留 的 工作 ， 需 要 在 转换 之 前 保存 。 然 后 运行 以 下 命令 : 


git checkout picture 


= 二 


这 条 命令 会 为 你 切换 到 一 个 新 的 代码 分 支 , 在 那里 可 以 使 用 <picture> 元 素 进行 实验 。 你 可 
以 通过 新 代码 开始 使 用 <picture> 元 素 ， 以 在 不 同 设备 上 对 文章 图 像 进行 不 同 的 处 理 。 


1. 在 “传奇 音调 ”网 站 上 使 用 美术 设计 图 像 

在 浏览 器 中 重新 加 载 “ 传 奇 音调 ”网 站 并 向 下 滚动 , 你 将 看 到 一 个 吉他 扩 音 器 的 新 文章 图 像 ， 
如 图 5-17 所 示 。 在 小 于 704 像素 的 屏幕 上 ， 图 像 位 于 段落 之 间 ， 并 在 视 口 居中 。 在 704 像素 和 
更 宽 的 屏幕 上 ， 图 像 向 右 浮 动 ， 文 本 环绕 图 像 。 
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style, volume— whatever. But it wasn't my problem thought that the problem was with the other player's equipment, style, volume 一 whatever. But it 


right? 


wasnt my problem right? 


Wrong. lt was ALL my problem and here's why. 
Taken in the context as a musical instrument, the 
guitar is primarily a producer of mid-range 
frequencies and is really a mid-range instrument. 
Boosting the 20Hz and 50Hz bass frequencies on 
an e.q. box does not change this fact! 


So when a typical band that includes a bassist 
and a drummer and perhaps keyboards gets into 


Wrong. lt was ALL my problem and here's why. Taken the equation, you've got a primarily mid-range instrument that is at the same time now trying to 


小 屏幕 


图 5-17 “传奇 音调 ” 
汤 开 ; 在 大 


大 屏幕 


网 站 上 的 图 像 行为 。 在 小 屏幕 ( 左 ) 中 ， 图 像 在 视 口 居 中 ， 段 落 
屏幕 ( 右 ) 中 ， 图 像 向 右 浮动 ， 文 本 环绕 图 像 
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5-17 中 的 图 像 设 置 在 <picture> 元 素 中 ， 可 以 在 index.html 的 第 30 行 找到 它 。 
代码 清单 5-4 “传奇 音调 ”网 站 的 <picture> 元 素 


<picture> < 一 picture 标签 
<img src="img/amp-small.jpg"> 
</picture> 如 果 浏 览 器 不 支持 <picture>， 则 显示 为 此 


我 们 想 添 加 到 这 个 设置 中 的 是 : A te Oi 并 为 
较 小 的 设备 提供 一 种 裁剪 方案 。 为 了 实现 这 一 点 ， 可 以 在 <picture> 中 添加 一 些 <source> 标 
签 ， 从 而 定义 更 多 图 像 供 浏览 器 使 用 。 NS 如 代码 清单 
5-5 所 示 。 


代码 清单 5-5 通过 <picture> 为 不 同 设备 添加 新 的 图 像 处 理 
<picture> 
<source media=" (min-width: 704px)" 
srcset="img/amp-medium.jpg 384w" sizes="33.3vw"> 
<source srcset="img/amp-cropped-small.jpg 320w" sizes="75vw"> 


<img src="img/amp-small.jpg"> 
</picture> 如 果 浏 览 器 不 支持 <picture>， 
<img> 依 然 可 以 正常 使 用 


为 了 实现 目标 , 可 以 为 两 个 不 同 的 图 像 分 别 添 加 <source> 标 签 。 第 一 个 <source> 标 签 包 含 
一 个 media 属性 , 该 属性 在 屏幕 为 704 像素 或 更 宽 时 生效 。 满 足 此 条 件 时 ，srcset 属性 将 提供 
一 个 384 像素 宽 的 图 像 ， 并 以 视 口 大 小 的 三 分 之 一 泻 染 该 图 像 。 

当 屏 幕 宽度 小 于 704 像素 时 ,第 二 个 <-source> 标 签 开始 生 效 。 这 个 <source> 标 签 的 srcset 

属性 用 于 引入 宽度 为 320 像素 的 不 同 的 图 像 处 理 ， 并 将 其 大 小 调整 为 视 口 宽度 的 75%。 图 5-18 
显示 了 新 代码 的 效果 。 
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style, volume 一 whatever. But it wasn't my problem thought that the problem was with the other player's equipment, style, volume 一 whatever. But it 
right? wasn't my problem right? 


Wrong. lt was ALL my problem and here's why. Taken in the 
context as a musical instrument, the guitar is primarily a 
producer of mid-range frequencies and is really a mid-range 
instrument. Boosting the 20Hz and 50Hz bass frequencies on 
an e.q. box does not change this fact! 


So when a typical band that includes a bassist and a 


drummer and perhaps keyboards gets into the equation, you've got a primarily mid-range 
instrument that is at the same time now trying to "compete" with those instruments when you do 
Wrong. lt was ALL my problem and here's why. Taken mid-scooping. Boosting the low end of the guitar isn't going to help you win in terms of clarity 


小 屏幕 大 屏幕 
图 $-18 ”修改 <picture> 元 素 后 网 站 的 图 像 行 为 。 请 注意 ， 小 屏幕 ( 左 ) 会 根据 屏幕 
分 辨 率 提供 不 同 的 图 像 处 理 


<picture> 元 素 的 威力 并 不 一 定 在 于 其 本 身 。 它 仅 仪 是 其 他 元 素 的 容器 ,这 些 元 素 决 定 了 响 
应 式 图 像 的 行为 ， 它 们 是 <source> 和 <img> 元 素 。<source> 元 素 是 进行 图 像 配置 的 地 方 ， 而 
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<img> 标 签 是 不 支持 <picture> 元 素 的 浏览 器 的 回 退 。 尽 管 <img> 标 签 提 供 了 回 退 行为 , 但 它 对 
于 <pictutre> 元 素来 说 是 必需 的 ， 不 该 被 省 略 。 

我 们 所 做 的 工作 对 于 一 些 低 DPI 的 显示 器 来 说 已 经 足够 好 了 , 但 是 你 应 该 更 进一步 , 以便 高 
DPI 的 显示 器 可 以 从 高 质量 的 图 像 中 受益 。 


2. 针对 高 DPI 显示 器 

可 以 轻松 使 用 <picture> 元 素 应 对 高 DPI 显示 器 。 这 需要 对 <source> 标 签 上 的 srcset 属 
性 进行 更 多 调整 。 对 于 这 个 网 站 , 可 以 修改 <picture> 元 素 的 内 容 ,以便 为 这 些 显 示 器 提供 更 好 
的 体验 。 代 码 清单 5-6 中 的 修改 以 粗 体 显示 。 


代码 清单 5-6 使 用 <picture> 为 高 DPI 显示 器 添加 图 像 


<picture> SR 
<source media=" (min-width: 704px)" 添加 高 分 辩 率 图 像 
比例 的 图 像 设 置 ; srcset="img/amp-medium.jpg 384w, (amp-large.jpg) 
1X 例 的 图 像 设置 为 img/amp-large.jpg 512w" 
img/lamp-cropped- sizes="33.3vw"> 
small.jpg . . 
<source srcset="img/amp-cropped-small.jpg 1x, 


img/amp-cropped-medium.jpg 2x" 
sizes="75vw" a 
和 ee 添加 2x 比例 的 图 像 


<img src="img/amp-small.jpg"> 
amp-cropped-medium. 
</picture> p-cropp Jpg 


这 些小 调整 有 两 个 作用 : 在 大 屏幕 上 ， 浏览 器 将 在 宽度 为 384px 或 512px 的 图 像 之 间 进 行 
选择 ; 在 小 屏幕 上 , 浏览 器 将 在 适合 低 DPI 显示 器 的 图 像 (amp-cripped-small.jpg ) 和 适合 高 DPI 
显示 器 的 图 像 (amp-cripped-medium.jpg ) 之 间 进 行 选 择 。 

为 了 告知 浏览 器 哪 种 图 像 应 用 于 哪 种 类 型 的 显示 器 ,在 srcset 属性 中 使 用 x 值 代替 宽度 值 。 
可 以 把 它 想象 成 一 个 简单 的 乘 数 ，1x 标记 适合 标准 DPI 屏幕 的 图 像 ，2x 或 更 高 的 倍数 表示 适合 
于 更 高 DPI 屏幕 的 图 像 。 如 果 愿 意 ， 甚 至 可 以 使 用 3x 或 更 高 的 倍数 ， 因 为 5K 显示 器 已 经 逐渐 
普及 了 。 

下 面 使 用 <picture> 元 素 为 不 同 的 文件 类 型 指定 回 退 , 并 了 解 如 何 借 此 利用 新 图 像 格 式 , 同 
时 保持 与 不 文 持 它 们 的 浏览 器 的 兼容 性 。 


3. 在 回 退 图 像 中 使 用 type 属性 

<picture> 元 素 还 可 以 根据 类 型 引用 一 系列 回 退 图 像 。 你 想 利 用 任何 新 的 图 像 格 式 , 又 希望 
确保 功能 较 弱 的 浏览 器 仍然 能 够 使 用 通用 格式 时 ， 它 很 有 用 。 

Google 的 WebP 格式 是 一 个 很 好 的 例子 。WebP 很 强大 ， 它 根据 图 像 内 容 提供 比 等 效 格式 更 
小 的 文件 。 

要 在 <picture> 元 素 中 创建 一 系列 回 退 , 可 以 在 <source> 元 素 上 使 用 type 属性 。type 接 
受 图 像 的 文件 类 型 作为 srcset 属性 中 指定 的 图 像 的 参数 。 

继续 使 用 <picture> 中 的 type 属性 来 优先 使 用 WebP 图 像 ， 并 在 不 支持 WebP 的 浏览 器 中 
回 退 到 JPEG 图 像 。 在 文本 编辑 器 中 ， 转 到 第 30 行 ,将 <picture> 元 素 的 内 容 更 改 为 以 下 内 容 : 
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<picture> 
<source srcset="img/amp-small.webp" type="image/webp"> 
<img src="img/amp-small.jpg"> 
</picture> 
现在 两 全 其 美 : 可 以 处 理 WebP 的 浏览 需 可 以 得 到 WebP , 不 能 处 理 的 浏览 器 将 回 退 到 JPEG。 
此 外 , 由 于 <picture> 元 素 中 的 <img> 标 签 是 回 退 标签 , 因此 它 可 以 在 不 支持 <picture> 本 身 的 
浏览 器 中 工作 ， 因 此 该 方法 可 以 使 用 任何 格式 而 不 必 担 心 不 兼 容 。 
我 们 已 经 探索 了 <picture> 元 素 的 作用 ， 接 下 来 介绍 如 何 使 用 Picturefill 库 ， 为 较 旧 的 浏览 
人 胡 polyfill <picture> 元 素 和 srcset 属性 


5.4.4 ”使 用 Picturefill 提 供 polyfill 支 持 


尽管 srcset 和 <picture> 都 很 有 用 ， 但 它们 的 浏览 器 支持 并 不 是 通用 的 。 值 得 庆幸 的 是 ， 
可 以 通过 一 个 名 为 Picturefil 的 11 KB 小 脚本 ， 在 不 支持 这 些 标签 浏览 器 中 使 用 它们 。 


1. 使 用 Picturefill 

和 任何 良好 的 polyfill 一 样 ，Picturefill 的 强大 在 于 它 的 透明 度 。 你 可 以 按照 预期 的 方式 使 用 
新 的 浏 览 絮 功能 » 所 有 浏览 器 都 表现 很 好 。 支持 <picture> 和 srcset 的 浏览 器 将 使 用 原生 实现 ， 
而 其 他 兼容 性 较 差 的 浏览 器 将 使 用 Picturefill。 

从 https:/scottjehlgithub.io/picturefilly 下 载 Picturefill 并 将 其 放 和 人 项目。 要 查看 Picturefill 是 如 
何 使 用 的 ， 可 以 输入 以 下 命令 ， 切 换 到 已 安装 Picturefill 的 新 分 支 : 


git checkout picturefill -f 


加 载 分 支 后 , 在 文本 编辑 器 中 打开 index.html 并 查看 第 7 行 和 第 8 行 。 你 将 在 <nead> 中 看 到 
下 面 两 个 <script> 代 码 块 : 


<script>document .createElement ("picture");</script> 
<script src="js/picturefill.min.js" async></script> 


第 一 个 <script> 块 用 于 无 法 识别 <picture> 元 素 的 浏览 器 ,并 防止 在 Picturefill 完成 加 载 之 
前 ， 浏 览 器 在 HTML 中 解析 它们 时 出 现 问题 。 第 二 个 块 加 载 Picturefill 库 ， 但 使 用 async 属性 ， 
因而 不 会 阻塞 页 面 演 染 ( 关于 async 的 详细 内 容 ， 请 参见 第 8 章 )。 

使 用 Picturefill 就 是 这 么 简单 。 脚 本 加 载 之 后 ， 那 些 不 支持 HTML 中 这 些 新 的 图 像 传输 功能 
的 浏览 絮 ， 现 在 可 以 很 好 地 支持 它们 了 。 

不 幸 的 是 ， 这 种 方法 并 不 能 阻止 支持 <bicture> 和 srcset 的 浏览 器 额外 下 载 Picturefill。 
接 下 来 ， 你 将 看 到 如 何 使 用 Modernizr 检查 <pbicture> 和 srcset 支持 ， 并 仅 为 需要 Picturefill 
的 浏览 器 加 载 它 。 


2. 使 用 Modernizr 选择 性 加 载 Picturefill 
Modernizr 是 一 个 健壮 的 特性 检测 库 ， 它 为 检测 浏览 器 对 某 些 特性 的 支持 提供 了 一 种 简单 的 
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方法 。 我 在 本 节 构 建 了 一 个 1.8 KB 的 自 定义 Modernizr, 它 只 包含 <zpicture> 和 srcset 的 特性 
检测 代码 。 

使 用 Modemizr 来 避免 在 现代 浏览 器 中 加 载 11 KB 的 Picturefill 库 ， 方 法 是 首先 检查 浏览 
是 否 需 要 它 。 如 果 任 意 一 个 特性 的 检测 失败 ， 则 加 载 PictureFill; 如 果 两 者 都 成 功 ， 则 不 加 载 
Picturefill， 这 样 也 就 省 去 了 浏 览 器 下 载 非 必要 代码 的 麻烦 。 

首先 , 删除 index.html 的 第 8 行 , 这 是 加 载 picturefill.min.js 的 <script> 块 。 然后 在 </body> 
结束 标签 之 前 添加 以 下 代码 : 


<script src="js/modernizr.custom.min.js"></script> 


<script> 
if (Modernizr.srcset === false || Modernizr.picture === false)t{ 
Var picturefill = document.createElement ("script"); 
pieturefilb srer = "je/BietOrerfiLrl mim. 
document .body.appendChild(picturefill); 
} 
</script> 


上 述 代 码 是 通过 包含 定制 的 Modernizr 构建 开始 的 。 然 后 ， 在 独立 的 <script> 标 签 中 编写 
了 一 些 代 码 ， 检 查 Modernizr 对 象 中 的 srcset 和 <picture> 支 持 。 如 果 其 中 任何 一 个 检查 失 
败 ， 则 创建 男 一 个 <script> 标 签 ， 将 其 src 属性 设置 为 指向 Picturefill， 并 将 其 注入 DOM。 在 
不 同 浏览 器 中 查看 开发 工具 中 的 网 络 选 项 卡 时 ， 可 以 看 到 低 版 本 的 浏览 器 下 载 picturefill.min.js， 
而 现代 浏览 器 则 不 加 载 它 ， 如 图 5-19 所 示 。 


O09 We 时 国生 Develcper 
口 a D De Aitz7e9 民间 Elements Layers Console Sources Ne 
Mi I 
中 Elements 地 Network OD Timelines 本 日 本 了 | view: 过 下 Preserve log | 
All Resources Decuments > 1 < 站 pictur Hide data URLs 已 
Name Domain Type Name Me... St... Scheme T... Initi 
| localhost localhost | Docum.. 四 localhost GET 200 http dd. Oth 
呵 styles.css localhost Styles... 号 styles.css GET 200 http 因 tind 
HN modernizr.custom.min.js lecalnost Script 癌 modernizrcustomminjs GET 200 http | 
-| logo:. localhost 1 
st i logo.svg GET 200 http ss. tind 
可 amp-small,jpg lecalnost Image 
四 amp-large.jpg CET 200 http 于 nd 
| masthead-xsmall.jpg localhost Image 
一 人 = masthead-medium.jpg CET 200 http j... (lind 
BB pichurefltminis oocanost sciot 二 
| data:image/webp;base64,UKkL... 一 Image 
Safari Chrome 


图 5-19 在 两 个 浏览 器 的 网 络 请 求 检查 器 中 观察 Picturefill 的 选择 性 加 载 。 左 边 是 Safari 
的 一 个 版 本 ， 它 不 支持 <picture> 或 srcset 特性 ， 因 此 会 加 载 Picturefill; 右 
边 是 Chrome， 它 完全 支持 这 些 特性 ， 因 此 跳 过 加 载 Picturefill 


有 了 这 部 分 代码 ， 即 可 为 那些 使 用 更 好 的 浏览 器 是 不 需要 Picturefill 的 用 户 免 去 下 载 Picturefill 
的 麻烦 。 更 少 的 请 求 和 更 少 的 代码 ， 意 味 着 支持 这 些 较 新 特性 的 用 户 具 有 更 快 的 加 载 速度 。 
下 一 节 将 介绍 如 何在 HTML 中 使 用 SVG, 以 及 使 用 响应 式 图 像 时 , 这 种 格式 固有 的 灵活 性 


3 


O 
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5.4.5 “在 HTML 中 使 用 SVG 


假设 你 想 要 描述 的 内 容 能 够 很 好 地 转换 为 SVG 格式 ， 那 么 在 HTML 中 使 用 SVG 是 响应 式 
图 像 的 最 佳 选 择 ， 其 行为 方式 与 在 CSS 中 使 用 时 类 似 。 


警告 : 本 节 讨 论 的 是 HTTP/2 反 模 式 ! 
本 节 简 要 讨论 内 联 SVG， 这 种 优化 技术 适用 于 托管 在 HTTP/1 服务 器 上 的 网 站 ， 但 在 
HTTP/2 上 应 该 避免 使 用 。 应 始终 确保 所 选择 的 优化 技术 适合 网 站 运行 的 协议 版 本 。 


在 HTML 中 使 用 SVG 的 优势 与 在 CSS 中 一 样 ， 即 这 种 格式 的 灵活 性 。 如 果 图 像 内 容 适 合 这 
种 格式 , 应 该 认真 考虑 使 用 这 种 格式 ,因为 这 样 可 避免 配置 多 个 图 像 源 以 在 不 同 设备 上 进行 最 住 
显示 。 这 是 一 种 通用 的 格式 。 

我 们 知道 如 何 使 用 <img> 标 签 ， 因此 在 HTML 中 使 用 SVG 会 很 容易 。 在 HTML 中 使 用 这 种 
图 像 格式 时 , 有 两 个 几乎 得 到 普遍 支持 的 选项 , 而 且 这 两 种 方法 在 响应 式 网 页 中 的 视觉 质量 和 易 
用 性 方面 ， 与 将 SVG 放 入 CSS 时 相同 。 这 两 个 选项 如 下 所 示 。 

口 使 用 <img> 标 签 这 是 最 简单 的 方法 ， 你 可 以 在 index.html 中 尝试 使 用 。 顶 部 的 logo 

原本 是 PNG 版 本 : 


<img src="img/logo.png" alt="Legendary Tones" id="logo"> 


而 img 文件 夹 中 同时 存在 logo.png 对 应 的 SVG 版 本 ,名 为 logo.svg。 要 使 用 它 , 请 将 <img> 
标签 的 src 属性 指向 img/logo.svg: 


<img src="img/logo.svg" alt="Legendary Tones" id="logo"> 


更 改 并 重新 加 载 页 面 后 , 将 看 到 logo 的 SVG 版 本 正在 使 用 中 。 在 HTML <img> 标 签 中 使 
用 SVG 文 件 时 ,几乎 没有 理由 在 <picture> 元 素 或 srcset 中 使 用 它 ,除非 在 <picture> 
元 素 中 将 其 用 作 一 系列 图 像 回 退 的 一 部 分 。 
口 内 联 SVG 文件 一 一 SVG 是 XML， 在 语法 上 类 似 于 HTML， 并 且 与 HTML 兼容 。 因 此 ， 
可 以 将 SVG 文件 直接 复制 粘贴 到 HTML。 
第 二 种 方式 有 优势 也 有 劣势 。 优 点 是 ， 内 鹃 SVG 可 以 通过 删除 HTTP 请 求 来 帮助 减少 页 面 
加 载 时 间 ， 前 提 是 你 的 站 点 没有 托管 在 HTTP/2 服务 器 上 。 缺 点 是 ， 这 也 使 得 资源 在 页 面 间 的 可 
缓存 性 降低 。 你 可 以 并 慎 权 衡 ,， 看 看 哪 种 方法 更 好 。 作 为 示例 ， 我 们 尝试 将 logo.svg 的 内 容 内 联 
到 index.html。 开 始 前 ， 请 用 如 下 命令 切换 到 inline-svg 分 文 : 
git checkout -ft inline-svg 
内 联 SVG 图 像 很 容易 。 对 于 这 个 网 站 ,只 需 从 文本 编辑 器 打开 img 文件 夹 中 的 logo.svg, 将 
文件 内 容 复制 到 剪贴 板 ， 并 用 SVG 文件 内 容 替换 logo 的 <img> 标 签 。 确 保 仅 复制 <svg> 标 签 及 
其 内 容 。 省 去 其 他 东西 ， 比 如 <?xml> 头 部 。 最 后 的 结果 应 该 如 代码 清单 5-7 所 示 (节选 )。 


5.5 小结 117 


代码 清单 5-7 在 HIML 中 内 联 SVG 


容 〈 为 简短 起 见 ， 
节选 了 部 分 内 容 ) 


<section id="masthead"> 
<svg id="logo" xmlns=http://www.w3.o0rg/2000/svg 
ViewBox="0 0 216.7 34">...</svg> 
<h2 id="tagline">Your Source for Great Guitar Tone</h2> 
</section> 


这 个 场景 不 是 最 理想 的 ， 但 它 说 明了 这 个 概念 。 内 联 SVG 的 一 个 很 好 的 场景 是 ， 资 源 作为 
某 些 内 容 的 一 部 分 出 现在 一 个 页 面 上 。 例 如 ， 矢 量化 的 信息 图 就 是 内 联 SVG 的 潜在 用 例 。 

即便 如 此 , 重要 的 是 要 记 住 , 互联 网 连接 的 典型 瓶颈 是 延迟 。 内 联通 过 在 较 少 的 请 求 中 分 摊 
延迟 来 减少 加 载 时 间 。 不 过 , 有 效 的 缓存 也 很 重要 。 请 仔细 权衡 , 看 看 怎么 做 对 你 的 网 站 有 意义 。 


| logo.svg 的 内 联 内 


5.5 小 结 


本 章 学 习 了 将 图 像 传 输 到 最 适合 设备 的 重要 性 。 这 个 概念 包含 以 下 相关 主题 : 

口 使 用 媒体 查询 在 CSS 中 传输 响应 式 图 像 ， 将 正确 的 图 像 源 提供 给 适当 的 设备 可 以 对 加 载 

和 处 理 时 间 产 生 积极 影响 ; 

口 使 用 srcset 属性 和 <picture> 元 素 在 HTML 中 传递 响应 式 图 像 ; 

口 以 最 优 方式 为 旧 浏 览 器 提供 <picture> 元 素 和 srcset 属性 的 polyfill 支持 ; 

口 在 CSS 和 HTML 中 使 用 SVG 图 像 ， 以 及 在 所 有 设备 上 进行 最 佳 显示 时 ， 这 个 格式 固有 
的 便利 性 和 灵活 性 。 

借助 这 些 概念 ,我 们 逐渐 优化 项 目 ， 这 样 用 户 只 下 载 他 们 需要 的 图 像 内 容 即 可 ， 同 时 还 能 确 

保 得 到 最 好 的 体验 。 接 下 来 学 习 图 像 优 化 的 概念 和 方法 ， 如 图 像 雪 瑰 图 、 新 的 图 像 压 缩 方法 ， 以 

及 使 用 WebP 格式 。 


图 像 的 进一步 处 理 


本 章 内 容 

口 使 用 自动 化 工具 从 多 个 图 像 文件 创建 图像 雪 怕 图 

口 在 不 显著 降低 图 像 视觉 质量 的 前 提 下 缩小 图 像 文件 

口 使 用 Google 的 WebP 图 像 格式 ， 并 将 其 与 旧 格 式 进行 比较 
口 延迟 加 载 ( 懒 加 载 ) 不 在 视 口 中 的 图 像 


我 们 在 第 5 章 了 解 了 最 优 图 像 传 输 的 重要 性 。 要 实现 这 个 目标 , 需要 使 用 媒体 查询 ,根据 用 
户 设备 的 功能 在 CSS 中 传输 图 像 ， 并 在 HTML 中 使 用 新 的 功能 。 

本 章 将 在 处 理 图 像 方面 更 进一步 ,涉及 以 下 内 容 : 通过 将 图 像 组 合成 雪 闫 图 来 减少 HTTP 请 
求 ; 通过 新 的 压缩 方法 来 减 小 光栅 图 像 和 矢量 图 像 的 大 小 ; 使 用 Google 的 WebP 图 像 格式 ; 理 
解 延迟 加 载 图 像 的 好 处 。 


6.1 使 用 图 像 委 条 图 


前 端 开 发 人 员 一 直 在 寻找 提高 网 站 性 能 的 方法 。 由 于 图 像 占据 了 页 面体 积 的 很 大 一 部 分 , 所 
以 “驾驭” 这 些 图 像 并 使 它们 更 易于 管理 ， 是 很 有 意义 的 。 


警告 : 本 节 讨 论 的 模式 是 HTTP/2 反 模 式 ! 
图 像 雪 禾 图 会 组 合 图 像 以 减少 HTTP 请 求 ， 这 是 一 种 连接 。 尽 管 你 应 该 在 HITP/1 上 使 用 
图 像 雪 牧 图 来 提高 页 面 加 载 速度 ,但 是 应 当 避 免 在 HTTP/2 上 使 用 它们 。 详 情 参 见 第 11 章 。 


你 肯定 已 经 注意 到 ,我 们 平时 访问 的 网 站 上 到 处 都 是 图 标 ， 比 如 表示 等 级 的 星星 图 标 、 社 交 
媒体 图 标 、 鼓 励 用 户 分 享 内 容 的 操作 图 标 等 。 这 些 图 像 很 有 可 能 是 所 谓 的 雪 怕 图 的 一 部 分 。 

那么 , 什么 是 雪碧 图 ? 雪 厅 图 就 是 把 以 往 在 整个 网 站 中 使 用 的 单独 的 图 像 文件 集合 起 来 , 组 
成 一 个 图 像 文 件 。 这 些 图 像 通常 是 图 标 等 全 局 元 素 。 雪 碍 图 示例 如 图 6-1 所 示 。 

雪 碍 图 在 创建 后 , 被 CSS background-image 属性 引用 , 并 由 background-position 属 
性 控制 ,该 属性 使 得 雪 怕 图 在 元 素 中 只 显示 该 图 像 的 相关 部 分 。 元 素 的 边界 框 将 雪 怕 图 的 其 余部 
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分 从 视图 中 排除 ， 人 们 会 以 为 元 素 只 在 背景 中 显示 了 一 个 图 像 。 
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图 6-1 不 同 社交 媒体 图 标 组合 而 成 的 雪 医 图 
这 样 做 的 好 处 是 , 你 可 以 将 大 量 图 像 缩减 为 单个 图 像 。 这样 可 以 更 加 高 效 地 传递 资源 ， 并 通 
过 减少 到 Web 服务 器 的 连接 数 来 缩短 页 面 的 加 载 时 间 。 
本 节 将 为 具有 6 个 SVG 图 标的 菜谱 网 站 创建 一 个 雪 括 图 ， 其 中 4 个 是 社交 媒体 图 标 ， 男 外 
两 个 是 用 于 表示 菜谱 评分 的 星星 图 标 。 你 将 使 用 命令 行 实用 程序 生成 一 个 雪 旬 图 以 及 使 用 它 所 需 
的 CSS ， 然 后 将 这 个 CSS 放 入 项 目 ， 并 用 新 的 雪 珀 图 殖 换 所 有 图 标 ， 使 页 面 的 请 求 数 从 25 减少 
到 20， 这 些 图 标的 加 载 时 间 从 大 约 500 毫秒 (使 用 Chrome 的 Good 3G 节 流 配置 ) 减少 到 90 毫 
秒 。 完 成 以 上 工作 后 ， 你 还 将 为 不 支持 SVG 的 旧 浏 览 器 创建 PNG 回 退 


6.1.1 准备 工作 


创建 雪碧 图 之 前 ， 需 要 下 载 一 个 实用 程序 来 生成 它 。 然 后 要 使 用 git 下 载 网 站 代码 。 可 以 
通过 以 下 命令 安装 雪 怕 图 生成 器 : 


npm install -9 svg-sprite 


安装 完成 后 ， 下 载 网 站 代码 并 在 本 地 计算 机 上 运行 。 在 选择 的 文件 夹 中 运行 以 下 命令 
git clone https://github.com/webopt/ch6-sprites.git 

cd ch6-sprites 

npm install 

node http.js 


以 上 命令 将 会 在 http://localhost:8080 启动 运行 菜谱 网 站 的 Web 服务 器 。 


想 要 跳 过 ? 
如 果 想 跳 到 后 查看 在 本 节 中 雪 艇 图 是 如 何 生 成 和 实现 的 ， 可 以 输入 git checkout 
svg-sprite -f。 请 注意 ,与 往常 一 样 ， 你 将 有 可 能 丢失 在 本 地 仓库 中 进行 的 所 有 修改 。 


让 我 们 正式 开始 吧 ! 
6.1.2 ”生成 雪 牙 图 


img 文件 夹 中 有 一 个 名 为 icon-images 的 子 文件 夹 ， 其 中 包含 6 个 单独 的 SVG 图 像 ， 可 以 组 
合成 一 个 雪 胜 图 ， 详 见 表 6-1。 
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表 6-1 菜谱 网 站 中 的 SVG 图 标 ， 可 以 将 它们 组 合成 一 个 雪碧 图 


图 像 名 称 图 像 功能 图 像 大 小 〈 字 节 ) 
icon facebook.svg Facebook 图 标 600 
icon _ google-plus.svg Google Plus 图 标 938 
icon pinterest.svg Pinterest 图 标 563 
icon star-off.svg 评分 星星 〈 非 激活 ) 299 
icon star-on.svg 评分 星星 〈 激 活 ) 302 
icon twitter.svg Twitter 图 标 759 


这 些 图 像 代表 6 个 请 求 。 到 本 节 结 束 时 ， 你 要 将 其 缩减 为 一 个 请 求 。 要 想 生成 雪原 图 ， 需 从 
菜谱 网 站 文件 夹 的 根 目录 中 使 用 svg-sprite 命令 ， 如 下 所 示 : 
svg-sprite --css --css-render-less --css-dest=less 


--cCss-sprite=../img/icons.svg 
--css-layout=diagonal img/icon-images/*.svg 


其 中 包含 了 很 多 操作 。 下 面 看 看 每 个 参数 ， 如 图 6-2 所 示 。 


以 CSS 模 式 运行 程 。 使 用 雪 自 图 指定 LESS 指定 图 像 雪 碧 图 
序 ， 以 生成 CSS 文 ”mixin 生 成 文件 的 输出 的 输出 文件 夹 和 
件 LESS 文 件 目录 文件 名 


svg-sprite --css --css-render-less --css-dest=less --css-sprite=../img/icons.svg 
--cCss-layout=diagonal img/icon-images/*.svg 


~ 和 下 这 2 
雪碧 图 在 画布 上 用 于 生成 雪碧 图 的 
的 布局 方向 SVG 图 像 的 位 置 


图 6-2 ”剖析 svg-sprite 命令 ， 使 用 LESS mixin 生成 SVG 雪 怕 网 


这 条 命令 完成 后 ， 生 成 的 雪 亲 图 将 位 于 img 文件 夹 , 新 LESS 文件 ( 名 为 sprite.less ) 将 位 于 
less 文件 夹 。 生 成 的 雪 怕 图 应 该 如 图 6-3 所 示 。 


a icon_ facebook.svg 


Pp icon google-plus.svg 


Ne icon_pinterest.svg 
icon_star_off.svg 
Ee icon_star_on.svg 


© 2 icon_twitter.svg 


图 6-3 ”新 生成 的 雪 亲 图 ， 注 释 显 示 了 添加 到 雪 雹 图 之 前 的 独立 文件 的 名 称 
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雪 莫 图 不 仅 能 用 于 图 标 ( 尽管 这 是 该 技术 的 常见 用 法 )， 还 可 以 对 其 他 元 素 生 成 雪 状 图 ， 例 
如 不 可 重复 的 背景 、 按 钮 图 像 ， 或 其 他 不 特定 于 内 容 的 图 像 。 完 成 此 步 又 后 ， 即 可 继续 更 新 菜谱 
网 站 的 CSS， 以 使 用 生成 的 雪 交 图 。 


6.1.3 ”使 用 生成 的 雪 怕 图 


下 一 步 是 将 生成 的 sprite.less 文件 包含 到 main.less 中 ， 这 两 个 文件 都 在 less 文件 夹 中 。 在 
main.less 的 开头 添加 下 面 这 行 代码 : 


@import "sprite.less"; 


这 行 代码 为 CSS 添加 了 雪 怕 图 的 LESS mixin。 可 以 用 这 些 LESS mixin 替换 单个 图 像 图 标 引 
用 ， 以 使 用 雪 帮 图 。 你 需要 做 6 次 修改 。 在 文本 编辑 器 中 搜索 .svg 字符 串 ， 并 用 表 6-2 中 相应 
的 LESS mixin 替换 每 个 background-image 引用 。 


表 6-2 图 标 图 像 以 及 用 于 替换 它们 的 LESS mixin 


像 名 LESS mixin 
icon facebook.svg .Svg-icon_ facebook; 
icon google-plus.svg .Svg-icon_ google-plus; 
icon_ pinterest.svg .Svg-icon pinterest; 
icon_ star-off.svg .Svg-icon_ star-off; 
icon_ star-on.svg .SVvg-icon_star-on; 
icon twitter.svg .Svg-icon twitter; 


为 了 帮助 你 上 手 , 我 将 带 你 用 新 雪碧 图 蔡 换 其 中 一 个 图 像 。 以 表 6-2 第 一 行 的 Facebook 图 标 
图 像 为 例 ， 执 行 以 下 操作 。 

(1) 用 文本 编辑 器 搜索 global_small.less 中 的 icon facebook.svg, 并 用 .svg-icon_facebook 
mixin 替换 它 出 现 的 行 。 在 本 例 中 ， 要 替换 的 行 如 下 所 示 : 


background-image: url("../img/icon-images/icon facebook.svg"); 


将 这 一 行 替换 为 .svg-icon_facebook mixin: 


.Svg-icon_ facebook; 


(2) 编译 LESS 文件 。 在 类 UNIX 系统 上 ， 运 行 less.sh; 在 Windows 系统 上 ， 运 行 less.bat。 
完成 这 些 步骤 后 ， 重 新 加 载 页 面 ， 将 看 到 Facebook 图 标 和 原来 一 样 。 现 在 ， 可 以 通过 检查 
浏览 器 开发 工具 中 的 image 元素， 并 检查 其 CSS， 查 看 是 否 正在 使 用 雪碧 图 。 
现在 需要 对 表 6-2 中 列 出 的 其 余 图 像 重 复 此 过 程 。 完 成 后 , 可 以 将 请 求 总 数 从 25 减少 到 20， 
并 将 雪 怕 图 资源 的 加 载 时 间 从 大 约 500 毫秒 减少 到 大 约 90 毫秒 。 
本 例 中 虽然 只 有 6 个 图 标 , 效果 并 不 明显 , 但 是 随 着 添加 到 雪 怕 图 中 的 图 像 数 量 增 加 ， 对 性 
能 的 积极 影响 也 会 增 大 。Facebook 网 站 就 是 一 个 使 用 雪 闫 图 的 例子 ， 它 使 用 雪 歼 图 提供 许多 图 像 ， 
例如 整个 网 站 使 用 的 图 标 、 按 钮 图 像 、 背 景 等 。 如 果 所 有 这 些 图 标 都 单独 提供 , 性 能 可 能 会 降低 。 
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6.1.4 ”使 用 雪 怕 图 时 的 考量 


目前 为 止 ， 我 们 已 经 学 习 了 如 何 使 用 svg-sprite 生成 器 创建 雪 脾 图 。 创 建 雪 奖 图 时 ， 应 
该 记 住 一 些 注意 事项 。 

如 前 所 述 ， 雪 茵 图 用 于 组 合 页 面 上 的 全 局 视觉 元 素 ( 如 图 标 等 )。 然 而 ， 为 特定 于 内 容 的 图 
像 创建 雪 奖 图 不 是 一 项 卓有成效 的 工作 。 特定 于 内 容 的 图 像 通常 会 降级 到 与 其 相关 的 页 面 , 而 全 
局 图 像 则 显示 在 网 站 的 每 个 页 面 上 。 创建 包含 特定 于 内 容 的 图 像 雪 获 图 , 会 迫使 用 户 下 载 可 能 不 
使 用 它 的 页 面 的 内 容 。 图 6-4 显示 了 本 节 中 为 其 创建 雪 蔷 图 的 菜谱 网 站 ,并 标注 了 适合 包含 在 雪 
歼 图 中 的 图 像 。 


Fish Tacos You Might Like... 


-= 


Beef Burrito | Seafood Ceviche 


2 
1 


tasty dish. 


Ingredients 


4tomatoes 
1/4 lime 


包含 在 雪 效 图 中 不 包含 在 雪 锋 图 中 
图 6-4 菜谱 网 站 上 的 图 像 概述 ， 说 明了 这 些 图 像 是 否 适合 包含 在 雪 脆 图 中 。 图 标 被 
标记 为 适合 包含 在 雪 夏 图 中 ， 而 菜谱 图 像 和 广告 这 样 的 图 像 则 不 适合 


你 不 应 该 过 于 严格 地 判定 什么 是 全 局 图 像 。 有 些 图 像 可 能 不 会 在 所 有 页 面 上 使 用 , 但 这 些 类 
型 的 图 像 仍然 应 该 包括 在 内 , 因为 它们 几乎 不 会 显著 增加 雪 怕 图 的 文件 大 小 。 预 先 加 载 它 们 可 以 
加 快 后 续 页 面 的 加 载 速度 ， 因 为 图 像 在 使 用 时 将 在 浏览 器 缓存 中 。 每 个 场景 都 是 独特 的 , 所 以 可 
以 列 出 一 个 图 像 清 单 ， 然 后 创造 最 适合 你 的 网 站 的 雪 茵 图 。 


6.1 使 用 图 像 雪 菇 图 123 


6.1.5 使 用 Grumpicon 回 退 到 光栅 图 像 雪 怕 图 


我 们 之 前 使 用 命令 行 实用 程序 创建 了 一 个 SVG 雪 怕 图 。 大 多 数 情况 下 ， 创 建 雪 和 旬 图 时 ， 使 
用 的 图 像 (图标 等 ) 都 是 适合 使 用 SVG 的 ， 因 为 它们 往往 与 这 个 格式 的 功能 相称 。 
尽管 大 多 数 浏览 器 支持 SVG, 但 可 能 仍 有 必要 指定 回 退 到 一 个 受到 更 广泛 支持 的 传统 格式 。 


这 时 Grumpicon 就 能 派 上 用 场 。 
Grumpicon 是 一 个 基于 Web 的 工具 , 它 接受 SVG 文件 , 并 和 后 成 带 有 回 退 选项 的 PNG 版 本 的 


雪 珀 图。 现在 要 将 雪 括 图 icons.svg 转换 为 用 于 旧 浏 览 器 的 PNG 版 本 。 开 始 前 ， 使 用 以 下 命令 切 
换 到 新 的 代码 分 支 : 


git checkout -f png-fallback 


vy A 


新 代码 下 载 到 计算 机 后 , 转 到 Grumpicon 网 站 并 从 img 文件 夹 上 传 icons.svg。 可 以 通过 浏览 
计算 机 上 的 该 文件 ， 或 者 将 文件 拖 忠 到 Grumpicon 动物 上 来 完成 此 操作 ， 如 图 6-5 所 示 。 


SN 
将 你 的 SVG 文件 拖 电 到 
Grumpicon 动 物 上 


或 点 击 此 处 上 传 
图 6-5 将 SVG 文 件 拖 忠 到 Grumpicon 动物 上 (或 者 浏览 文件 ) 可 以 将 SVG 
文件 转换 为 PNG 


上 传 icons.svg 后 ，zip 文件 将 自动 开始 下 载 。 打 开 此 zip 文件 并 转 到 其 中 的 png 文件 来， 里 
面 有 一 个 名 为 icons.png 的 文件 。 将 此 文件 复制 到 荣 谱 网 站 的 img 文件 夹 。 

现在 要 调整 sprite.less 中 的 LESS mixin, 以 便 在 不 支持 SVG 的 情况 下 回 退 到 这 个 文件 。 实 现 
此 回 退 的 方法 是 使 用 一 系列 packground-image 声明 。 在 文本 编辑 器 中 ,打开 sprite.less， 并 在 
第 1 行 找到 svg-common () mixin。 修 改 此 mixin 的 内 容 ， 如 代码 清单 6-1 所 示 。 


代码 清单 6-1 对 于 不 支持 SVG 的 浏览 器 ， 回 退 到 PNG 
.Svg-common (){ 
background: url("../img/icons.png") no- ts 和 
: background: none, url(" I Svg" i PNG 版 本 
带 有 SVG 回 退 的 的 回 退 
重 背 景 图 像 引 用 
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这 段 代 码 做 了 两 件 事 : 在 第 一 个 background- image 声明 中 , 指定 回 退 到 icons .png。 在 
下 一 行 中 指定 多 个 背景 ， 最 后 一 个 是 SVG 雪碧 图 。 更 改 并 包含 回 退 图 像 后 ， 运 行 less.sh 
( Windows 系统 上 是 less .bat )， 重 新 编译 LESS 文件 。 

此 回 退 之 所 以 有 效 ， 是 因为 较 旧 的 浏览 如 将 读 取 第 一 个 background 属性 并 将 其 应 用 于 页 
面 。 较 旧 的 浏览 器 试图 解释 第 二 个 packgrounad 属性 时 ， 将 会 失败 ， 因 为 较 旧 的 浏览 器 无 法 解 
析 多 个 背景 。 这 些 功 能 较 弱 的 浏览 器 将 默认 为 对 icons.png 的 初始 引用 。 功 能 更 强 的 浏览 器 可 以 
选择 和 使 用 icons.svg， 而 忽略 icons.png 文件 。 这 样 做 是 因为 浏览 器 预期 不 需要 icons.png， 因 为 
它 被 icons.svg 的 引用 覆盖 ， 并 且 浏 览 器 将 不 会 选择 下 载 PNG 文件 。 

我 们 已 经 了 解 了 雪 苯 图 及 其 优点 , 以 及 如 何 为 所 有 浏览 器 创建 它们 ,下面 学 习 如 何 减 小 图 像 
大 小 。 


6.2 缩小 图 像 


设想 客户 有 一 个 网 站 ， 该 网 站 有 一 个 菜谱 合集 页 面 ， 里 面 存 在 大 量 图 像 内 容 。 客 户 注 意 到 ， 
在 所 有 设备 上 ， 即 使 图 像 是 响应 式 的， 加载 此 页 面 仍 需 要 很 长 时 间 。 这 些 页 面 很 重点 ,能 给 网 站 
上 的 其 他 页 面 带 来 流量 , 但 是 客户 知道 ,如果 你 能 够 缩短 此 页 面 的 加 载 时 间 ， 则 可 能 会 诱 使 那些 
不 太 耐 烦 的 用 户 进一步 访问 客户 的 网 站 。 


自动 减 小 图 像 大 小 ! 
本 节 教 你 如 何 编写 Node 脚本， 以便 在 示例 项 目 中 对 图 像 执行 批量 优化 。 如 果 你 对 自动 化 
本 节 所 教 的 技术 感 兴趣 ， 请 参阅 第 12 章 。 


这 就 是 缩小 图 像 的 作用 。 这 个 过 程 减 小 了 图 像 的 文件 大 小 ,但 没有 大 幅 降 低 图 像 的 视觉 质量 。 
许多 图 像 编辑 程序 不 能 产生 对 Web 最 有 利 的 输出 。 一 个 很 好 的 例子 是 Photoshop 中 名 为 Save for 
Web (这 个 名 称 很 讽刺 ) 的 对 话 框 。 尽 管 Save for Web 有 一 些 有 用 的 预 设 和 选项 ， 但 它 与 现代 的 
缩小 图 像 算 法 相 比 并 没有 太 大 的 优势 。 

开始 前 ， 需 要 下 载 客户 的 菜谱 网 站 ， 并 使 用 以 下 命令 在 计算 机 上 运行 该 网 站 : 

git clone https://github.com/webopt/ch6-image-reduction.git 

cd ch6-image-reduction 


npm install 
node http.js 


接 下 来 ， 浏 览 http://localhost:8080， 应 该 会 看 到 客户 的 菜谱 网 站 ， 如 图 6-6 所 示 。 
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ALLIHEFOODS! ww 


TenMinuteDinners ”Dinner Party Hits AwesomeGrilling Recipes HealthyLunches LightBreakfast 


Guilled Pork Chops 


Fish Recipes 
”RN | Sf RE. 
图 6-6 客户 的 菜谱 网 站 在 平板 计算 机 临界 点 时 的 状态 
设置 并 运行 网 站 后 ， 使 用 名 为 imagemin 的 Node 程序 优化 JPEG 图 像 ， 然 后 进一步 学 习 如 
何 使 用 它 优化 PNG 图 像 ， 最 后 了 解 如 何 使 用 svgo Node 程序 优化 SVG 图 像 。 
6.2.1 使 用 imagemin 优 化 光栅 图 像 


imagemin 是 优化 该 网 站 图 像 的 首选 工具 ， 它 是 一 个 用 Node 编写 的 通用 图 像 优化 模块 ， 能 
够 优化 Web 上 使 用 的 所 有 类 型 的 图 像 。 本 节 将 编写 一 个 Node 小 程序 , 使 用 imagemin 优化 菜谱 
网 站 img 文件 夹 中 的 所 有 JPEG 图 像 。 


注意 你 的 角色 
不 言 而 喻 ,你 能 否 将 这 些 技术 应 用 到 你 工作 的 网 站 , 取决 于 你 所 承担 的 责任 。 如 果 同 时 扮 
演 设计 师 和 开发 人 员 的 角色 , 你 就 有 更 多 的 选择 余地 ,但 是 , 如 果 你 所 在 组 织 的 角色 分 工 细致 ， 
你 的 职责 仅 限于 开发 ， 那 么 请 向 项 目 设 计 师 交代 清楚 你 想 做 的 优化 。 


此 工具 要 求 为 Node 编写 一 点 JavaScript， 而 不 是 运行 npm 安装 的 命令 行 工 具 ， 这 与 之 前 所 
做 的 工作 不 同 。 不 过 别 担心 ! 这 个 过 程 很 简单 ， 我 会 一 步 一 步 地 教 你 。 


1. 优化 JPEG 图 像 

开始 之 前 ， 对 项 目 图 像 进行 清点 。 浏 览 网 站 的 img 文件 夹 ， 会 看 到 34 个 菜谱 图 像 以 -1xjpg 
或 -2x.jpg 结尾 ， 也 就 是 有 17 对 JPEG 图 像 。 你 可 能 已 经 猜 到 ， 这 些 图 像 分 别 表示 用 于 标准 DPI 
屏幕 和 高 DPI 屏幕 的 图 像 。 这 个 页 面 使 用 我 们 第 5 章 中 了 解 到 的 srcset 属性 , 根据 设备 的 功能 
传输 图 像 。 

我 们 需要 通过 两 个 ( 而 不 是 一 个 ) 基准 衡量 你 的 页 面 是 由 多 少 图 像 表 示 的 。 基 准 会 根据 屏幕 
类 型 和 设备 分 辩 率 进行 更 改 。 表 6-3 列 出 了 屏幕 DPI、 总 图 像 负载 ， 以 及 Chrome 网 络 实用 工具 
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中 Good 3G 网 络 节 流 配置 下 网 站 的 加 载 时间 。 
表 6-3 屏幕 DPI、 图 像 大 小 和 页 面 总 加 载 时 间 


屏幕 DPI 图 像 负 载 加 载 时 间 
高 2089 KB 11.5 秒 
标准 732 KB 4.38 秒 


尽管 带 有 标准 屏幕 的 设备 能 以 权宜 之 法 加 载 站 点 ,但 高 DPI 设备 肯定 很 难 。 让 我 们 用 
imagemin 给 它们 打 一 剂 强 心 针 。 为 此 项 目 安 装 imagemin， 请 运行 以 下 命令 : 


npm install imagemin imagemin-jpeg-recompress 
mkdir optimg 


第 一 个 命令 安装 两 个 包 : imagemin 模块 和 imagemin 的 JPEG 优化 插件 jpeg-recompress。 
第 二 个 命令 创建 一 个 名 为 optimg 的 新 文件 夹 ，ijmagemin 代码 会 将 优化 后 的 图 像 写 入 该 文件 夹 。 
安装 这 些 程序 之 后 ， 编 写 一 个 Node 小 程序 来 完成 工作 。 在 网 站 的 根 文件 夹 中 ， 创 建 一 个 名 为 
reduce.js 的 新 文件 ， 并 添加 以 下 内 容 。 


代码 清单 6-2 使 用 imagemin 优化 目录 中 的 所 有 JPEG 
导入 imagemin 导入 imagemin 的 jpeg- 
Node 包 recompress 插件 
Var imagemin = require("imagemin"), 
jpegRecompress = require("imagemin-jpeg-recompress"); 


recompress, plugins: [ i 
精确 度 优先 jpegRecompress ({ sad JPEG, 并 


于 速度 accurater-. ErUS, 


max: 70 
设置 输出 图 像 的 
] 最 大 JPEG 质量 


告诉 jpeg- ijmagemin(["img/*.jpg"], "optimg", { | 创建 imagemin 对 象 ， 


})3 
上 述 代码 很 简单 :， require 语句 导入 imagemin 模块 。 使 用 这 些 模块 创建 一 个 imagemin 
对 象 ， 该 对 象 处 理 img 中 的 所 有 JPEG， 并 将 优化 的 输出 写 入 optimg。 完 成 后 ， 保 存 reducejs 
并 使 用 Node 运行 它 : 
node reduce.js 


这 可 能 需要 一 点 时 间 。 在 我 的 笔记 本 计算 机 上 ， 这 个 命令 大 约 需 要 10~15 秒 。 如 果 脚 本 花费 
时 间 太 长 ， 可 以 将 代码 清单 6-2 中 的 accurate 标志 设置 为 false， 以 缩短 处 理 时 间 。 

程序 完成 后 , 你 将 看 到 optimg 文件 夹 中 填充 了 优化 的 图 像 。 对比 每 个 文件 夹 中 chicken-tacos- 
2x.jpg 的 未 优化 输出 和 优化 输出 ， 如 图 6-7 所 示 。 


6.2 


缩小 图 像 
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bp 


未 优化 (181.9 KB) 优化 后 (79.41 KB) 


图 6-7 chicken-tacos-2x.jpg 未 优化 版 本 ( 左 ) 与 优化 版 本 ( 右 ) 的 比较 。 
优化 后 的 版 本 缩小 了 大 约 55%， 但 是 视觉 上 的 差异 极其 微小 


优化 JPEG 后 ,需要 在 index.html 中 指向 它们 。 为 此 ， 可 以 将 图 像 从 optimg 文件 夹 复制 并 粘 
贴 到 img 文件 夹 ， 并 选择 覆盖 所 有 冲突 。 此 方法 不 涉及 对 index.html 的 更 改 。 如 果 要 保留 未 优化 


的 文件 ， 可 以 将 <img> 标 签 引用 更 改 为 指向 optimg 文件 夹 中 的 文件 。 


打开 页 面 ， 并 在 Chrome 的 Network 选项 卡 中 检查 其 加 载 时 间 ， 你 会 注意 到 页 面 的 加 载 速度 


有 很 大 的 提高 ， 同 时 没有 一 张 图 像 看 起 来 与 其 未 优化 版 本 有 明显 不 同 。 


使 用 imagemin 脚本 后 , 这 两 种 类 别 的 图 像 的 文件 大 小 都 减 小 了 59%。 性 能 改进 如 图 6-8 所 


示 ， 这 意味 着 页 面 加 载 时 间 减 少 了 50%。 
图 像 优 化 前 后 菜谱 网 站 


的 加 载 时 间 对 比 
(数值 越 低 越 好 ) 
高 DPI 
标准 DPI 
| | | | | | 
0s 2s 4s 6s 8s 10s 12s 
加 载 时 间 


优化 前 


优化 后 


图 6-8 使 用 Google Chrome 中 Good 3G 网 络 节 流 配置 优化 菜谱 网 站 图 


像 前 后 的 网 站 加 载 时 间 
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这 些 结果 远 远 超出 了 客户 的 期 望 。 除 了 最 不 耐烦 的 用 户 之 外 , 所 有 人 都 应 该 对 网 站 的 改进 性 
能 感到 满意 ， 这 使 他 们 能 够 通过 这 个 内 容 门户 畅通 无 阻 地 访问 更 多 菜谱 。 

在 reduce.js 中 添加 和 调整 ijmagemin-jpeg-recompress 选项 ， 可 以 进一步 调整 该 程序 的 
输出 。 所 有 选项 都 记录 在 imagemin-jpeg-recompress 的 npm 包 页 面 。 请 注意 ， 激 进 的 优化 
可 能 导致 图 像 明显 降级 , 因此 要 始终 将 优化 的 输出 与 未 优化 的 输入 进行 比较 ,以 确保 结果 符合 你 
的 标准 。 

此 外 ，imagemin-jpeg-recompress 并 不 是 唯一 的 JPEG 优化 库 。 


2. 优化 PNG 图 像 
使 用 imagemin 优化 PNG 的 方式 与 优化 JPEG 基本 相同 ， 但 上 手 实践 优化 这 些 图 像 类 型 也 
是 有 好 处 的 。 开 始 前 ， 输 入 以 下 命令 创建 新 的 代码 分 支 : 


git checkout -f pngopt 


除了 从 本 节 前 面 引入 优化 后 的 JPEG 之 外 ， 此 命令 唯一 更 改 的 是 网 站 logo， 将 其 从 SVG 换 
成 了 PNG 图 像 集 。 添 加 了 两 个 PNG 文件 : logo.png 用 于 标准 DPI 屏幕 ，logo-2x.png 用 于 高 DPI 
屏幕 ， 其 大 小 分 别 为 4.81 KB 和 8.83 KB。 开 始 优 化 前 ， 使 用 以 下 命令 下 载 imagemin-optipng 
插件 : 


npm install imagemin-optipng 
安装 完成 后 ， 打 开 reducejs， 对 其 进行 的 更 改 如 代码 清单 6-3 所 示 。 
代码 清单 6-3 使 用 imagemin 优化 PNG 


var imagemin = require("imagemin"), 
optipng = require("imagemin-optipng"); 


导入 imagemin 的 
. ， ， optipng 插件 
imagemin(["img/*.png"], "optimg", { 
plugins: [optipng()] 
国友 
导入 optipng 插件 , 处 理 img 目录 中 的 
PNG， 并 将 输出 写 入 optimg 文件 来 


这 段 代 码 的 工作 原理 与 JPEG 优化 器 类 似 ， 只 不 过 正在 处 理 的 是 PNG 文件 。 要 测试 它 ， 请 
通过 Node 运行 reduce.js， 如 下 所 示 : 


node reduce.js 


然后 ， 应 该 能 够 在 optimg 目录 中 看 到 优化 后 的 PNG 文件 。 图 6-9 显示 了 优化 需 运 行 前 后 的 
文件 大 小 。 
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PNG 文 件 体积 优化 前 后 的 对 比 


(数值 越 低 越 好 ) 
es 
logo.png | | 优化 后 
logo-2x.png 
| | | | | 
0KB 2KB 4KB 6KB 8 KB 10 KB 
文件 大 小 


图 6-9 ”logo.png 和 logo-2x.png 文件 优化 前 后 的 对 比 


经 过 优化 ，logo.png 和 logo-2x.png 的 文件 大 小 分 别 减 小 了 33%~37%。 在 这 个 过 程 中 ， 图 像 
的 视觉 质量 没有 受到 影响 。 

通过 使 用 imagemin-optipng 插件 中 的 optimizationLevel 选项 , 可 以 从 这 个 程序 中 获 
得 更 多 好 处 。 这 个 选项 是 该 插件 中 唯一 可 用 的 选项 , 它 接受 一 个 0~7 的 整数 。 较 高 的 值 可 以 进 一 
步 减 小 文件 大 小 。 不 过 在 某 一 点 之 后 ， 这 样 做 将 无 法 产生 更 好 的 结果 。optimizationLevel 的 
默认 值 为 2， 即使 在 该 实例 中 提升 到 最 大 值 7， 也 不 会 实现 比 默认 值 更 多 的 增益 。 不 同 的 图 像 可 
能 会 产生 不 同 的 结果 ， 你 可 以 通过 实践 验证 。 


6.2.2 ”优化 SVG 图 像 


优化 SVG 图 像 的 机 制 与 光栅 图 像 有 点 不 同 。 原 因 是 ,光栅 图 像 是 二 进 制 文件 , 但 SVG 文件 
是 文本 文件 ， 可 以 进行 如 最 小 化 和 服务 器 压缩 等 优化 。 

客户 对 你 所 做 的 工作 很 满意 。 同 事 感 觉 你 现在 有 余 暇 ， 给 你 发 来 了 电子 邮件 。 她 为 一 家 名 为 
Weekly Timber 的 木材 和 纸浆 公司 设计 了 SVG logo，logo 很 棒 ， 但 其 大 小 为 40 KB。 她 想 让 你 看 
看 能 不 能 做 些 优化 。 

幸运 的 是 ， 名 为 svgo 的 Node 命令 行 工具 也 可 用 作 imagemin 插件 。 由 于 你 要 优化 的 文件 只 
有 一 个 , 所 以 使 用 命令 行 工 具 将 比 编写 JavaScript 程序 更 方便 。 要 在 系统 上 安装 svgo, 请 使 用 npm: 


npm install -9 svgo 
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这 条 命令 将 在 系统 上 全 局 安装 svgo， 以 便 你 在 任何 地 方 都 能 使 用 。 然 后 需要 从 http:/jlwagner. 
net/webopt/ch06/weekly-timber.svg 获取 SVG。 下 载 后 转 到 它 所 在 的 终端 文件 夹 ， 然 后 尝试 以 下 
命令 : 

svgo -oOo weekly-timber-opt.svg weekly-timber.svg 

这 个 命令 的 格式 很 简单 。 它 以 -o 参数 开始 ， 该 参数 是 svgo 写 人 优化 后 的 输出 的 文件 名 称 。 
之 后 是 未 优化 的 SVG 文件 的 名 称 。 运 行 此 命令 时 ， 将 得 到 以 下 输出 : 

39.998 KiB - 28.4% = 28.656 KiB 

还 不 错 ! svgo 的 默认 行为 通过 简化 SVG 的 内 容 和 缩小 它 实现 了 大 幅 优 化 。SVG 文件 比 原 


来 小 了 大 约 28%。 下面 在 浏览 器 中 打开 优化 后 和 未 优化 的 版 本 并 进行 比较 , 了 解 对 图 像 质量 的 影 
响 ， 如 图 6-10 所 示 。 


优化 前 (39.99 KB) 优化 后 (28.66 KB) 
图 6-10 ”使 用 svgo 默认 选项 优化 前 〈 左 ) 和 优化 后 ( 右 ) 的 Weekly Timber logo 


图 像 质 量 几乎 不 受 影响 ,可 以 在 Photoshop 或 Tllustrator 等 程序 中 打开 这 两 个 文件 并 进行 比较 。 
如 果 没 有 图 像 处 理 软 件 ， 也 可 以 在 任何 现代 浏览 器 中 打开 SVG。 你 应 该 不 会 注意 到 两 者 之 间 的 
区 别 ， 即 使 注意 到 有 任何 差异 ,也 不 会 很 明显 。 激 进 优化 的 SVG 图 像 的 特点 是 缺少 精致 的 细节 ， 
夺 别 是 在 贝 塞 尔 曲线 的 质量 方面 。 

svgo 程序 功能 强大 , 有 很 多 选项 。 也许 我 们 应 该 深入 看 看 你 是 否 可 以 进一步 优化 这 个 图 像 。 
键入 svgo -h 可 以 查看 其 他 选项 。 值 得 留意 的 是 -p 参数 ， 可 以 使 用 它 来 控制 浮 点 数 的 精度 。 尝 
试 将 此 值 设置 为 1， 并 使 用 如 下 命令 查看 输出 内 容 : 

svgo -p 1 -oO weekly-timber-opt.svg weekly-timber.svg 

运行 这 条 命令 后 ， 应 该 能 看 到 如 下 输出 : 

39.998 KiB - 53.9% = 18.42 KiB 


文件 又 缩小 了 25%! 不 过 , 不 要 太仓 促 地 宣布 成 功 。 应 该 观察 输出 ,看 看 是 否 引入 了 任何 异 
常 。 图 6-11 比较 了 原始 未 优化 图 像 的 输出 和 进一步 优化 后 的 版 本 。 
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优化 前 (39.99 KB ) 优化 后 (18.42 KB) 
图 6-11 优化 前 ( 左 ) 和 优化 后 (将 svgo 设 为 1 以 降低 小 数 精度 后 ， 右 ) 的 Weekly Timber logo 


更 仔细 地 观察 这 些 图 像 ， 可 以 看 到 一 些 差 异 ， 但 区 别 仍然 很 小 。 图 6-12 进一步 展示 了 从 同 
一 个 未 优化 的 SVG 中 去 除 所 有 精度 后 的 情况 。 


优化 前 激进 优化 后 
过 度 简化 的 
贝 塞 尔 曲线 


6-12 未 优化 的 logo.svg (〈 左 ) 与 过 度 优 化 〈 右 ) 的 版 本 。SVG 图 形 中 的 所 有 精度 
都 被 去 除 ， 导 致 保 真 度 损失 ， 特 别 是 贝 塞 尔 曲线 


这 个 版 本 的 SVG 大 小 是 10.81 KB， 是 目前 最 小 的 , 但 是 较 小 的 文件 大 小 不 值得 降级 。 过 于 
激进 的 优化 会 有 缺点 ， 因 此 ， 你 始终 要 确保 结果 令 你 满意 ,尤其 是 令 你 的 客户 满意 ! 通常 可 以 放 
大 图 像 并 将 其 与 未 优化 的 版 本 进行 比较 ， 以 确定 SVG 优化 是 否 会 带 来 任何 负面 影响 。 

了 解 了 各 种 类 型 的 网 络 图 像 的 优化 技术 后 ， 就 会 发 现 Google 的 WebP 图 像 格式 的 实用 性 。 


6.3 ”使 用 WebP 编码 图 像 


从 商业 互联 网 早期 开始 ， 光 机 图 像 仪 有 的 可 用 选项 就 是 JPG、GIF 和 PNG 格式 。 几 乎 再 没 
有 新 的 格式 出 现 ， 直 到 几 年 前 Google 引 入 了 WebP。 

菜谱 网 站 的 客户 听 说 了 这 种 新 的 图 像 格式 , 想 知道 使 用 它 能 否 带 来 收益 。 客 户 希 望 你 研究 一 
下 在 菜谱 集合 页 面 上 能 获得 哪些 收益 。 
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幸运 的 是 , 你 一 直 在 使 用 的 imagemin 程序 有 一 个 插件 ， 可 以 将 图 像 转换 为 WebP 格式 ， 这 
个 插件 被 命名 为 imagemin-webp。 它 使 用 的 模式 与 你 以 前 使 用 过 的 相同 ， 所 以 这 对 你 来 说 根本 
不 是 什么 新 鲜 事 。 

与 其 他 图 像 格式 不 同 的 是 ，WebP 同时 文 持 有 损 和 无 损 格 式 编码 。 本 节 将 使 用 imagemin- 
webp 插件 对 有 损 和 无 损 WebP 图 像 进行 编码 ， 还 将 使 用 <picture> 元 素 为 不 支持 WebP 的 浏览 
器 提供 回 退 。 


6.3.1 使 用 imagemin 编 码 有 损 WebP 图 像 
使 用 imagmin 编码 有 损 WebP 图 像 很 容易 ， 它 与 以 前 用 于 优化 JPEG 的 模式 相同 。 但 在 本 例 
中 , 你 要 使 用 它 将 JPEG 转换 为 WebP 图 像 。 开 始 前 , 使 用 以 下 命令 切换 到 客户 菜谱 网 站 的 新 分 支 : 
git checkout -f webp 
此 命令 完成 后 ， 需 要 安装 imagemin 和 imagemin-wepp 插件 : 
npm install imagemin imagemin-webp 
现在 要 编写 WebP 的 图 像 转换 代码 , 这 与 你 编写 的 其 他 imagemin 程序 类 似 。 创建 一 个 名 为 
reduce-webpjjs 的 文件 ， 并 在 其 中 输入 代码 清单 6-4。 
代码 清单 6-4 使 用 imagemin 将 JPEG 图 像 编码 为 有 损 WebP 图 像 


var imagemin = require("imagemin"), 
webp = require("imagemin-webp"); 


导入 imagemin-webp 


插件 


imagemin(["img/*.jpg"], "optimg", { 
plugins: [webp({ 
quality: 40 
?3] 
小字 


输入 node reduce-webp.js， 运行 这 段 脚 本 。 运 行 之 后 ，img 文件 夹 中 的 所 有 JPEG 都 将 
被 编码 为 WebP， 并 保存 到 optimg 文件 夹 。 接 下 来 ， 比 较 6.2.1 节 中 优化 的 一 个 JPEG 与 WebP 输 
出 的 质量 ， 如 图 6-13 所 示 。 


将 WebP 编码 器 的 质量 
设置 为 40, 最 大 值 为 100 


Sp 
WebP (67.67 KB) 


”优化 后 的 JEPG (79.41 KB) 


图 6-13 使 用 imagemin 的 jpeg-recompress 插件 优化 的 JPEG ( 左 ) 与 
质量 设置 为 40 时 由 未 优化 的 JPEG 编码 而 成 的 WebP 图 像 ( 右 ) 
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似乎 没有 太 大 差异 。WebP 有 一 些 缺 点 ， 较 低 质量 的 设置 会 产生 视觉 瑕 病 , 但 JPEG 也 是 如 
此 。 将 所 有 图 像 转换 为 WebP 后 ,将 index.html 中 对 JPEG 的 所 有 引用 切换 到 WebP 文件 。 使 用 
Chrome 中 的 Good 3G 节 流 配置 , 比较 WebP 文件 与 优化 和 未 优化 的 JPEG 文件 的 加 载 性 能 , 如 图 
6-14 所 示 。 


菜谱 网 站 加 载 时 间 : 
优化 后 的 JPEG、 未 优化 的 JPEG 与 WebP 图 像 

(数值 越 低 越 好 ) 
国 #twfctomsa 
| | |] 优化 后 9JPEG 

| | WebP 
标准 DPI 
0s 2s 4s 6s 8s 10s 12s 
加 载 时 间 


图 6-14 ”比较 标准 和 高 DPI 屏幕 上 JPEG 和 WebP 图 像 在 菜谱 网 站 上 的 加 载 时 间 。 
与 优化 后 和 未 优化 的 JPEG 图 像 相 比 ，WebP 图 像 的 加 载 性 能 更 好 


与 优化 后 的 JPEG 相 比 ，WebP 优化 使 高 DPI 和 标准 DPI 屏幕 上 的 页 面 加 载 时 间 分 别 减少 了 
35% 和 20%。 这 无 疑 意 味 WebP 值得 我 们 为 之 努力 ， 即 使 它 并 没有 受到 广泛 支持 。 
但 是 我 们 还 没有 人 研究 过 WebP 在 无 损 图 像 方面 的 潜力 。 下 一 节 将 比较 WebP 与 PNG 文件。 


6.3.2 ”使 用 imagemin 编 码 无 损 WebP 图 像 


WebP 还 支持 与 全 彩 PNG 格式 类 似 的 无 损 编码 ， 支 持 24 位 全 色 和 全 透明 。 本 节 将 把 菜谱 网 
站 logo 的 PNG 版 本 转换 为 WebP。 只 需 调整 reduce-webp.js 脚本 的 几 个 部 分 。 修 改 的 行 在 代码 清 
单 6-5 中 用 粗 体 标注 。 


代码 清单 6-5 使 用 imagemin 将 PNG 图 像 编码 为 无 损 WebP 图 像 
var imagemin = require("imagemin"), 
webp = require("imagemin-webp"); 修改 imagemin 调 用 的 


第 一 个 参数 


imagemin(["img/*.png"], "optimg", { 
plugins: [webp({ 
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lossless: true 将 选项 替换 为 lossless 
1 选项 ， 并 设置 为 true 


9 学 
此 处 所 做 的 更 改 , 就 是 将 imagemin 调用 的 第 一 个 参数 中 的 文件 通配符 修改 为 指向 img 文件 
夹 中 的 PNG 文件 ， 并 将 webp 对 象 中 的 选项 蔡 换 为 lossless: true， 该 选项 告诉 imagemin 
对 WebP 图 像 进行 无 损 编码 。 修 改 后 重新 运行 脚本 。 

脚本 完成 PNG 图像 的 转换 后 ， 图 像 将 被 放 到 optimg 文件 夹 。 图 6-15 比较 了 无 损 WebP 文件 
与 6.2.1 节 优 化 的 PNG 文件 以 及 原始 未 优化 PNG 文件 的 大 小 。 


PNG 文 件 优化 前 后 的 体积 与 无 


损 WebP 文 件 体积 的 比较 
(数值 越 低 越 好 ) 

国 wertweNc 

logo.png 于 优化 后 的 PNG 
[| 无 损 WebP 

logo-2x.png 
| | 1 | | 
0KB 2KB 4KB 6KB 8 KB 10 KB 
文件 大 小 


图 6-15 未 优化 的 PNG、 优 化 后 的 PNG 和 无 损 WebP 图 像 的 文件 大 小 


在 不 牺牲 logo 视觉 质量 的 情况 下 ， 进 一 步 优 化 了 logo.png 和 logo-2x.png， 文 件 分 别 减 小 了 
40% 和 33%。 接 下 来 ,我 们 学 习 如 何 指示 不 支持 WebP 的 浏览 器 优雅 回 退 到 使 用 <picture> 元 素 
可 以 支持 的 图 像 。 


6.3.3 ”支持 不 支持 WebP 的 浏览 器 


尽管 WebP 是 一 种 很 好 的 图 像 格式 ， 你 也 可 以 从 现在 开始 使 用 它 , 但 它 的 支持 并 不 像 成 熟 的 
图 像 格式 那么 广泛 。 如 果 你 的 用 户 依 赖 于 Firefox 或 Safari 等 浏览 器 ， 他 们 将 看 到 类 似 于 图 6-16 
所 示 的 内 容 。 
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回 三 
Ten Minute Dinners DinnerPartyHits AwesomeGrillingRecipes HealthyLunches Lig 


Grilled Pork Chops 


图 6-16 ”Safari 不 能 显示 WebP 图 像 


这 可 不 行 ! 你 需要 指定 其 他 浏览 器 可 以 处 理 的 回 退 。 这 时 可 以 使 用 <picture> 元 素 , 它 可 以 
根据 图 像 类 型 回 退 到 图 像 。 
我 们 在 第 5 章 中 了 解 过 这 个 方法 , 但 是 这 里 将 把 它 应 用 到 菜谱 网 站 ， 以 便 支持 WebP 的 浏览 
器 能 够 受益 。 那 些 不 能 支持 WebP 的 浏览 絮 将 回 退 到 JPEG 图 像 。 首 先 , 使 用 git 切换 到 网 站 的 
新 代码 分 支 : 


git checkout webp-fallback 


下 载 代码 后 ， 在 Chrome 中 打开 该 网 站 ， 然 后 在 另 一 个 不 支持 WebP 的 浏览 器 (如 Safari 或 
Firefox ) 中 再 次 打开 该 网 站 。 你 将 注意 到 这 些 图 像 可 以 在 Chrome 中 工作 ， 但 无 法 在 其 他 浏览 
中 加 载 ， 如 图 6-16 所 示 。 

此 时 ， 在 文本 编辑 器 中 打开 index.html， 并 查找 对 logo.webp 文件 的 引用 。 代 码 如 下 : 


<img src="optimg/l1ogo.webp" 
srcset="optimg/logo.webp lx, optimg/l1o0go-2x.webp 2x" 
alt="AllTheFoods" idq="1ogo"> 


根据 这 个 <img> 标 签 ， 使 用 带 有 type 属性 回 退 的 <picture> 元 素 对 其 进行 修改 ， 如 代码 清 
单 6-6 所 示 。 


代码 清单 6-6 使 用 <picture> 元 素 建 立 回 退 


首选 WebP 
饼 | 了 | 
<picture> 图 像 来 源 
<source srcset="optimg/l1o0go-2x.webp 2x, optimg/logo.webp 1x" 
type="image/webp"> 
<source srcset="img/1ogo-2x.png 2x, img/logo.png 1x" type="image/png"> 
img src="img/logo.png" id="logo" y 
A 备份 图 像 来 源 ， 
不 支持 <picture> 的 浏 指向 PNG 回 退 
览 器 的 默认 图 像 来 源 
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注意 < img> 元 素 仍然 保 


留 logo 的 ia 属性 值 。 这 只 


不 过 是 为 了 确保 #1ogo 选择 天 的 样式 能 


应 用 于 图 像 。 设置 <picture> 元 素 的 样式 时 , 应 该 将 样式 指向 <img> 标 签 ， 因为 <picture> 会 将 
所 选 <source> 元 素 的 图 像 分 配给 该 标签 。 
可 以 在 index.html 中 始终 使 用 这 种 模式 ， 并 为 主 图 和 菜谱 集合 图 像 重 新 制作 <img> 标 签 。 


想 要 跳 过 ? 


如 果 想 跳 到 后 面 查看 最 终结 果 , 可 以 输入 git checkout -f webp-picture-fallback。 


修改 完 HTML 中 的 所 有 图 像 后 ， 在 每 个 浏览 絮 的 开发 工具 中 打开 Network 选项 卡 ， 并 注意 
重新 加 载 页 面 时 会 发 生 什么 情况 。Chrome 将 下 载 WebP 图 像 ， 而 Firefox 将 回 到 它 支 持 的 图 像 类 


型 ， 如 图 6-17 所 示 。 


_| localhost CET 性 
| css?family=Lato:700,400 CET L 
| scripts.min.js CET L 
| styles.min.css CET 大 
_| logo-2x.webp GET 各 
ma hero-2x.webp CET 奏 
= fish-and-chips-2x.webp CET 而 
ma fish-tacos-2x.webp CET 而 
a red-snapper-2x.webp CET 


Google Chrome 加 载 WebP 图 像 


图 6-17 菜谱 集合 页 面 在 两 个 Web 浏 览 器 中 的 网 络 请 求 检 查 器 。Chrome ( 左 ) 可 以 使 
而 Firefox( 右 ) 不 能 ， 因 此 它 可 以 回 退 到 支持 的 图 像 类 型 ” 


在 Chrome 上 为 相当 一 部 分 用 户 提供 一 种 有 优势 的 图 像 格 式 ， 还 为 那 


WebP 图 像 ， 


我 们 在 此 做 了 两 件 事 : 


了 


styles.min.css 


css?family=Lato:?700,400 
scripts.min.js 

| | logo-2x.png 
hero-2x.jpg 

[| fish-and-chips-2x.jpg 
| fish-tacos-2x.jpg 


Firefox 回 退 到 JPEG 和 PNG 


二 


些 使 用 其 他 浏览 器 的 用 户 提供 图 像 内 容 。 


现在 你 知道 了 如 何 使 用 WebP 图 像 ， 以 及 如 何 向 不 支持 它们 的 浏览 器 提供 回 退 ， 接 下 来 学 习 
延迟 图 像 加 载 ( 也 称 懒 加 载 )。 


6.4” 懒 加 载 图 像 


客户 很 欣赏 你 在 优化 网 站 图 像 方面 取得 的 进步 , 但 他 们 还 有 最 后 一 个 要 求 。 客 户 已 经 注意 到 ， 


竞争 对 手 的 网 站 只 在 图 像 位 于 视 口 中 时 才 加 载 图 像 。 他 
不 仅仅 是 因为 它 是 一 个 内 亮 的 新 功能 。 这 是 一 种 成 熟 的 技术 ， 只 在 需 


客户 想 增 加 这 个 功能 ， 
要 时 加 载 图 像 。 当 你 懒 加 载 


门 想 知道 你 是 否 也 能 做 到 这 一 点 。 


图 像 时 , 可 以 防止 在 用 户 其 3 


像 。 这 样 可 以 节省 带宽 ， 并 减少 网 站 的 初始 加 载 时 间 。 


GD Firefox 自 版 本 65 开始 支持 


WebP。 一 一 译 者 注 


E 还 看 不 到 图 像 的 情况 下 不 必要 地 加 载 图 
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本 节 将 学 习 如 何 用 JavaScript 编写 一 个 简单 的 懒 加 载 程序 ,在 客户 的 菜谱 集合 页 面 中 实现 它 ， 
然后 为 不 支持 JavaScript 的 浏览 器 添加 基本 功能 。 开 始 编写 懒 加 载 程序 前 ,通过 git 下 载 一 个 新 
的 代码 仓库 。 运 行 以 下 命令 下 载 代码 ， 并 启动 本 地 Web 服务 器 : 


git clone https://github.com/webopt/ch6-lazyload.git 
cd ch6-lazyload 

npm install 

node http.js 


一 切 就 绪 后 ， 开 始 在 标记 中 定义 图 像 的 模式 。 如 果 遇 到 问题 ， 可 以 键入 git checkout -f 
lazyload 查看 完整 的 index.html 和 lazyloader.js 文件 。 让 我 们 从 配置 标记 开始 。 


6.4.1 配置 标记 


为 懒 加 载 程序 配置 标记 是 任务 中 最 省 时 的 部 分 , 但 它 至 关 重 要 。 你 需要 一 个 阻止 浏览 器 默认 
加 载 图 像 的 模式 。 

首先 , 让 我 们 看 看 页 面 应 该 懒 加 载 哪 些 图 像 。 首先 观 察 页面 的 折 羞 位置， 然后 懒 加 载 那 些 折 
秋之 下 或 者 可 能 在 折 和 友之 下 的 内 容 。 要 确定 用 户 的 折 和 县 位 置 ， 请 考虑 使 用 第 4 章 的 书签 小 工具 
VisualFold!。 图 6-18 显示 了 你 希望 正常 加 载 的 图 像 ， 并 对 应 该 懒 加 载 哪些 图 像 给 出 了 建议 。 
和 


ALLIHEFOODSIvw 


Ten Minute Dinners ”Dinner Party Hits AwesomeGrillingRecipes “Healthy Lunches “Light Break 


> 不 需要 懒 加 载 


及 
4» 
Grilled Pork Chops ， 


> 需要 懒 加 载 


nn" ) 
一 -一 
\ em 
Fish and Chips Fish Tacos 


图 6-18 ”检查 哪些 图 像 懒 加 载 有 意义 ， 而 哪些 没有 


审核 页 面 时 ,可 以 立即 看 到 两 个 不 适合 懒 加 载 的 图 像 : logo 图 像 和 大 型 主 图像 ， 用 营销 术语 
来 说 , 这 两 个 图 像 被 称 为 主 图 ( hero image ). 不 管 怎样 , 它们 都 会 在 折 有 至 之 上 。 然 而 , .collection 
元 素 中 的 菜谱 集合 缩 略 图 非常 适合 懒 加 载 ; 它们 很 可 能 位 于 大 多 数 设备 的 折 受 之 下 ,因为 大 型 主 
图 占据 了 空间 。 即 使 它们 位 于 折 铸 之 上 ， 当 脚本 初始 化 并 加 载 它 们 时 ， 懒 加 载 程序 也 会 在 页 面 加 
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载 时 捕获 它们 。 如 有 需要 ， 稍 后 可 以 调整 哪些 元 素 需 要 懒 加载 。 
页 面 上 有 4 个 .collection 元 素 ， 每 个 元 素 在 <picture> 元 素 中 都 有 4 张 图 像 缩 略图 。 其 
中 一 个 元 素 如 下 所 示 : 


<picture> 
<source srcset="img/fish-and-chips-2x.webp 2x, 
img/fish-and-chips-1x.webp 1x" 
type="image/webp"> 
<source srcset="img/fish-and-chips-2x.jpg 2x, 
img/fish-and-chips-1x.jpg 1x" 
type="image/jpeg"> 
<img src="img/fish-and-chips-1lx.jpg" class="recipeImage"> 
</picture> 


你 需要 做 两 件 事 : 将 srcset 和 src 属性 移动 到 data 属性 ， 这 样 图 像 就 不 会 加 载 ; 为 需要 
懒 加 载 脚 本 处 理 的 <img> 元 素 添 加 一 个 类 。 更 改 这 个 标记 ， 如 代码 清单 6-7 所 示 。 


代码 清单 6-7 ”为 懒 加 载 程序 脚本 准备 图 像 


<picture> 


<source data-srcset="img/fish-and-chips-2x.webp 2x, 
img/fish-and-chips-1x.webp 1x" 人 
type="image/webp"> 人 懒 加 载 的 
<source data-srcset="img/fish-and-chips-2x.jpg 2x, 
img/fish-and-chips-1x.jpg 1x" 
type="image/jpeg"> 指向 懒 加 载 的 图 像 。src 
<img src="img/blank.png" 器 一 八 上 位 
1 一 立 图 
data-src="img/fish-and-chips-1x.jpg" 属性 指向 一 个 占 位 图 
class="recipeImage lazy"> 
</picture> 添加 lazy 类 , 这 样 懒 加 载 程 序 
会 在 后 续 对 其 进行 处 理 


对 标记 的 更 改 很 简单 。 将 <source> 和 <img> 元 素 上 的 所 有 srcset 和 src 属性 更 改 为 
data-srcset 和 data-src 属性 ,将 图 像 URL 存储 在 这 些 占 位 符 属 性 中 可 以 跟踪 图 像 来 源 , 同 
时 防止 它们 加 载 ， 直 到 你 希望 加 载 为 止 。 

然后 , 在 <img> 标 签 上 创建 一 个 新 的 src 属性 ， 指 向 具有 灰色 背景 的 16 像素 x9 像素 占 位 符 
PNG。 这 通过 引入 占用 同等 空间 的 占 位 符 ， 使 布局 的 变化 保持 最 小 。 最 后 一 步 是 将 1azy 类 添加 
到 <img> 标 签 。 这 就 是 在 需要 加 载 图 像 时 懒 加 载 程序 脚本 的 目标 元 素 。 

现在 ,需要 对 .collection 元 素 中 的 每 个 <-picture> 元 素 进行 相同 的 更 改 。 完 成 后 即 可 编 
写 懒 加 载 脚 本 。 


6.4.2 ”编写 懒 加 载 程序 


现在 可 以 开始 使 用 集合 页 上 定义 的 标记 模式 编写 懒 加 载 程序 脚本 了 。 别 担心 , 我 将 通过 一 系 
列 代码 解释 过 程 中 的 每 个 步 又 。 我 们 开始 吧 ! 


1. 打 基 础 
我 们 将 从 基础 开始 。 这 涉及 为 lazyLoader 对 象 创建 一 个 闭 包 ， 该 闭 包 将 脚本 的 作用 域 与 


6.4” 懒 加 载 图 像 139 


页 面 上 的 其 他 脚本 隔离 开 来 。 
在 js 文件 夹 中 , 创建 一 个 名 为 lazyloaderjs 的 新 JavaScript 文件 。 然 后 在 文件 中 输入 代码 清单 6-8。 


代码 清单 6-8 ” 懒 加 载 程序 脚本 起 步 


定义 lazyLoader 闭 包 开始 HTML 中 ， 懒 
对 象 (function (window, document){ | ， MX 


var lazyLoader = { 加 载 图 像 使 用 
lazyClass: "lazy", 的 类 名 
图 像 元 素 集合 “一 images: null, 


processing: false, \ 田 六 太 
节 流 时 间 ， 单 位 为 毫秒 一 throttle:; 200， 处 理 状态 ， 用 于 
限制 执行 


buffer: 50 
闭 包 }) i document ) ; | 视 口 缓冲 大 小 ， 用 于 加 载 
结束 视 口 边缘 附近 的 图 像 

这 段 代 码 的 信息 量 已 经 很 多 了 。 你 正在 为 分 配给 懒 加 载 程序 脚本 的 1azyLoader 变量 构建 
一 个 对 象 ， 并 将 所 有 内 容 封 装 在 闭 包 中 。 这 个 对 象 将 是 属性 和 函数 的 一 个 集合 ,这些 属性 和 函数 
将 促进 懒 加 载 行 为 。 你 将 根据 1azyclass 属性 的 内 容 选择 具有 lazy 类 的 所 有 图 像 元 素 ， 并 在 
稍 后 的 images 属性 中 保存 该 集合 。 

processing 属性 表示 懒 加 载 程序 是 否 正 在 扫描 文档 中 的 图 像 , 稍 后 将 对 其 进行 检查 ,以 防 
止 脚本 活动 过 多 。throttle 属性 是 懒 加 载 程 序 再 次 扫描 图 像 之 前 需要 等 待 的 时 间 ( 毫秒 )。 
buffer 属性 通过 指定 超出 视 口 下 边缘 的 像素 数 ， 触 发 特定 图 像 的 懒 加 载 行为 ， 如 图 6-19 所 示 。 


Web site! 
和 和 加 #9 QO http://www.website.com 


Xl 


一 一 需要 懒 加 载 的 图 像 


图 6-19 buffer 属性 指定 懒 加 载 程序 将 在 视 口外 寻找 要 加 载 的 图 像 的 距离 。 通 过 将 懒 
加 载 程序 查找 的 内 容 扩展 到 视 口 之 外 ,可 以 在 接近 图 像 时 开始 加 载 图 像 ， 从 而 
让 浏览 器 有 一 个 良好 的 初始 体验 


准备 好 这 个 结构 的 框架 之 后 ， 即 可 构建 构造 和 析 构 懒 加 载 程序 行为 的 方法 。 
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2. 打造 构造 器 和 析 构 器 

构造 咒 和 析 构 器 是 脚本 的 重要 组 成 部 分 , 如 果 没 有 它们 , 脚本 就 没有 一 个 可 以 执行 其 颌 加 载 
功能 的 来 源 。 如 果 没 有 函数 来 析 构 懒 加 载 行为 ， 脚本 将 继续 运行 ， 即 使 在 加 载 所 有 图 像 之 后 , 也 
会 毫 无 用 处 地 消耗 CPU 时 间 。 

接 下 来 ,我 们 将 编写 两 个 新 的 对 象 属性 init 和 destroy 属性 ， 分 别 绑 定 到 一 个 构造 和 析 


构 懒 加 载 程 序 的 方法 。 代 码 清单 6-9 放置 在 puffer 属性 的 定义 之 后 。 


代码 清单 6-9 ”构造 函数 和 析 构 函数 
开始 懒 加 载 行为 通过 lazyclass 属性 定义 


buffer: 50, 不 一 
在 初始 化 jinit: function(){ i 
时 运行 lazyLoader.images = [].slice.call (document .getElementsByClassName 
scanImages (lazyLoader.lazyClass)); 
lazyLoader.scanImages ();} 
document .addEventListener("scroll", lazyLoader.scanImages); 三 
在 滚动 document .addEventListener("touchmove", lazyLoader.scanImages); + 人 
时 运行 |。 从 页 面 中 删除 懒 加 载 行 为 We 
aninades destroy: function(){ | > 人 人 行 
document .removeEventListener("scroll", lazyLoader.scanImages); 


移 除 触摸 屏 
滚动 事件 


document .removeEventListener("touchmove", lazyLoader.scanImages); 
} 幕 的 


从 页 面 中 移 除 
滚动 事件 

有 了 这 些 补充 , 可 以 说 你 已 经 打 好 基础 了 。 我 们 为 懒 加 载 行为 创建 了 框架 ,以 便 将 懒 加 载 行 
为 附加 到 适当 的 图 像 元 素 中 。 下 一 个 难题 是 scanImages 方法 。 


3. 检查 文档 中 的 图 像 

前 面 的 代码 片段 在 许多 地 方 引 用 了 scanImages 方法 , 但 是 你 还 没有 编写 该 方法 。 此 方法 
在 scroll 事件 (移动 设备 : touchmove 事件 ) 中 触发 ， 并 检查 带 有 lazy 类 的 图 像 是 否 在 视 
口 底部 边缘 的 50 像素 范围 内 。 代 码 清 单 6-10 说 明了 如 何 定 义 scanImages 方法 。 


代码 清单 6-10 ”定义 scanImages 方法 


检查 是 否 还 有 图 像 
scanImages: function(){ 需要 懒 加 载 
检查 文档 是 if(document .getElementsByClassName (lazyLoader.lazyClass) .length === 0){ 
ee 2 lazyLoader.destroy (); 
否 正在 被 检 es ”| 如 果 所 有 图 像 都 已 加 载 ， 
查 图 像 } 则 析 构 懒 加 载 程序 
if(lazyLoader.processing === false){ 
lazyLoader.processing = true; 将 processing 标志 位 设置 为 
ne true， 以 阻塞 后 续 代码 执行 
将 代码 块 的 setTimeout (function(){ 
0 for(var i in lazyLoader.images)t 在 集合 中 的 所 有 
定 的 时 间 4 
图 像 上 循环 
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检查 元 素 是 否 
检查 图 像 if(lazyLoader.images[i]. 包含 1azv 类 
是 否 在 视 a 


className.indexOf (lazyLoader.lazyClass) !== 
口中 if(lazyLoader.inViewport (lazyLoader.images[i]))t{ 


lazyLoader.loadImage (lazyLoader.images [i]); 
将 当前 元 素 传递 给 


关闭 Drocessiig } loadImage 方法 
标志 位 中 a 
lazyLoader.processing = false; 通过 Fhrottle 属性 
}, lazyLoader.throttle); 指定 超时 时 间 


} 
} 


该 方法 首先 检查 是 否 还 有 需要 懒 加 载 的 图 像 。 如 果 没 有 ， 则 运行 destroy 方法 并 结束 懒 加 
载 程序 。 如 果 还 有 更 多 图 像 要 处 理 ， 则 使 用 for 循环 运行 setTimeout 调用 ,该 循环 使 用 
inViewport 方法 遍历 所 有 图 像 ， 并 查看 它们 是 否 在 视 口 中 。 如 果 此 方法 对 于 图 像 返 回 true， 

则 加 载 图 像 。 通 过 将 processing 属性 设置 为 true， 可 以 防止 来 自 scrol1l 事件 侦 听 需 的 过 度 
调用 。 接 下 来 ， 需 要 编写 scanImages 引用 的 inviewport 和 loadImage 方法 。 


4. 编写 核心 懒 加 载 方法 


要 触发 懒 加 载 行为 , 需要 一 个 跨 浏览 器 兼容 的 方法 , 确定 给 定 的 图 像 元 素 是 否 在 视 口 中 。 这 
就 是 inVviewport 方法 ， 如 代码 清单 6-11 所 示 。 


代码 清单 6-11 定义 inviewport 方法 


inViewport 
~ i WV 
inViewport: function(img)f{ 方法 定义 
var top = ((dqocument .bodqy.scrol1lTop | 
document .documentElement.scrollTop) + window.innerHeight) + 
lazyLoader.buffer; Re 二 
return img.offsetTop <= top; < 一 守信 人 下 和 和 
}， 检查 给 定 的 图 像 人 
是 否 在 视 口中 


inViewport 方法 很 简单 。 它 可 以 检查 用 户 向 下 滚动 页 面 的 距离 。 它 通过 有 条 件 地 检查 
document .body.scrollTop 或 dgocument .documentElement .scrollTop 属性 来 实现 这 一 
点 。 之 所 以 要 检查 , 原因 是 IE9 对 于 document .body .scrollTop 有 兼容 性 问题 (始终 返回 0 )， 
因此 可 以 使 用 | 1 运算 符 回 退 到 类 似 的 属性 。 然 后 将 该 值 加 上 窗口 的 高 度 ， 得 到 用 户 视 口 的 底部 ; 
之 后 添加 一 个 额外 的 缓冲 区 值 ， 以 在 图 像 接近 但 不 完全 位 于 ) 视 口 时 触发 图 像 加 载 。 图 6-20 
显示 了 上 述 计算 与 浏览 器 视 口 和 传递 给 inViewport 的 图 像 元 素 的 关系 。 
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SEE Web sitel 
和 和 加 $9 Q http://www.website.com 


var top = ((document .body.scrollTop 
|| document .documentElement scrollTop) 
+ window.innerHeight) 


top + lazyLoader .buffer 


img.offsetTop | 


图 6-20 ”inviewport 方法 的 位 置 计算 ,以 及 它们 与 视 口 和 目标 图 像 元 素 的 关系 。 在 这 
种 情况 下 ， 视 口 高 度 加 上 给 定 的 缓冲 区 空间 量 超出 了 图 像 元 素 的 上 边界 ， 因 此 
返回 值 为 true 


接 下 来 , 继续 编写 驱动 懒 加 载 行为 本 身 的 程序 的 核心 部 分 : 10adImage 方法 ， 如 代码 清单 6-12 
所 示 。 


代码 清单 6-12 ”定义 loadImage 方法 


loadImage 检查 图 像 元 素 的 父 节点 
:十 一 WW 三 一 和 ers 
; 是 否 是 <picture> 元 素 
方法 定义 » 获取 附近 的 <source> 
loadImage: function(img)t{ 元 素 
if(img.parentNode.tagName === "PICTURE"){ 和 
a . Var sourceEl = img.parentNode.getElementsByTagName ("source"); 
遍历 <picture> 
元 素 中 所 有 的 for(var i = 0; i < sourceEl.length; i++){ 
<source> 元 素 


Var sourceSrcset = sourceEl[i] .getAttribute("data-srcset"); 


闭 取 ata-grcgat if(sourceSrcset !== null)t{ 
属性 ， 用 于 加 载 图 像 sourceFEl[i].setAttribute("srcset", sourceSrcset); 检查 <source> 
’ sourceE1l [1] .removeAttribute("data-srcset"); 元 素 上 是 否 存 
} 在 srcset 属性 
了 设置 srcset， 并 删除 aata-srcset 
} 
Var imgSrc = img.getAttripbute("data-src"), 
imgSrcset = img.getAttribute("data-srcset"); 从 <img> 中 获取 data-src 
和 data-srcset 


if(imgSrc !== null){ 所 检查 <img> 元 素 上 是 否 存在 aata-src 属性 


img.setAttribute("src", imgSsrc); | : SE 
img.removeAttribute("data-src"); 将 cimg3 的 ere 设置 为 Gata-src 属 性 的 信 
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| data-srcset 属性 


if(imgSrcset !== null)f{ 
img.setAttribute("srcset", imgSrcset); 使 用 aata-srcset 的 
img.removeAttribute("data-srcset"); 内 容 替 换 srcset 
} 
, lazyLoader.removeClass (img, lazyLoader.lazyClass); 移 除 <img> 元 素 的 
' 懒 加 载 类 名 


loadImage 方法 首先 检查 它 是 否 是 <zpicture> 元 素 的 直接 子 元 素 。 如 果 是 ， 则 扫描 附近 的 
<source> 元 素 ， 并 将 其 data-src 和 data-srcset 属性 转换 为 src 和 srcset 属性 。 完 成 此 
操作 后 ， 将 处 理 <img> 元 素 的 data-src 和 data-srcset 属性 ， 并 将 其 转换 为 src 和 srcset 
辕 性 。 然 后 浏览 絮 就 会 向 Web 服务 器 发 送 这 些 资源 的 请 求 。 此 函数 的 编写 方式 使 得 懒 加 载 程序 
可 以 处 理 <picture> 元 素 指 定 的 图 像 ， 以 及 标准 <img> 和 可 选 的 srcset 支持 。 更 改 属性 并 开始 
加 载 图 像 后 ， 将 使 用 新 方法 removeclass 删除 1azy 类 。 你 必须 先 定 义 这 个 方法 ， 如 代码 清单 
6-13 所 示 。 


代码 清单 6-13 ”定义 removeclass 属性 


将 className 机 
字符 串 转换 成 攻 定义 removeClass 
居 


数组 emoveClass: function(img, className){ 方法 
Var classArr = img.className.split(" "); 


for(var i = 0; i < classArr.length; i++){ < 一 循环 这 个 数组 


ee if(classArr[i] === className)t{ 
如 果 数 组 元 素 等 classArr.splice(i, 1); 


将 移 除 这 个 
A a 数组 元 素 
img.className = classArr.toString() .replace("，"，" "); 
] 将 数组 转换 成 字符 囊 ， 
并 重新 赋值 


这 个 方法 将 图 像 元 素 的 className 字符 串 转换 为 数组 ， 并 对 其 进行 循环 。 如 果 找 到 lazy 
类 ， 则 将 其 移 除 ， 并 将 数组 转换 回 字 符 串 ， 然 后 重新 赋值 给 图 像 元 素 的 className 属性 。 

5. 开始 运行 脚本 

既然 对 象 里 的 内 容 已 经 全 部 定义 ， 下 面 可 以 在 onreadystatechange 事件 中 触发 lazyLoagder 
的 init 事件 ， 如 下 所 示 : 

document .onreadystatechange = lazyLoader.init; 

这 个 事件 会 等 待 DOM 加 载 ， 加 载 完 成 后 ， 懒 加 载 行为 将 作用 到 指定 的 图 像 元 素 。 剩 下 要 做 
的 就 是 , 通过 在 scripts.min.js 的 引用 后 面 放 置 一 个 引用 lazyloaderjs 的 <script> 标 签 , 加 载 脚本 


<script src="js/lazyloader.js"></script> 


加 载 脚本 后 , 假设 没有 语法 错误 , 向 下 滚动 页 面 时 应 该 能 够 看 到 网 像 一边 加 载 一 边 滚动 到 视 
中 。 要 查看 懒 加 载 程序 的 工作 方式 ， 请 尝试 打开 正在 使 用 的 浏览 器 的 Network 选项 卡 ， 然 后 重 
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新 加 载 页 面 。 等 待 页面 加 载 并 滚动 页 面 。 在 图 像 懒 加 载 时 ,应 该 能 够 看 到 瀑布 图 中 出 现 新 的 网 络 


请 求 ， 如 图 6-21 所 示 。 


Name Method Status 
a hero-2x.webp GET 200 
blank.png GET 200 
= fish-and-chips-2x.webp GET 200 
加 fish-tacos-2x.webp GET 200 
加 red-snapper-2x.webp GET 200 
® Cat-fish-stir-fry-2x.webp GET 200 
mm filet-mignon-2x.webp GET 200 
四 pot-roast-2x.Webp GET 200 
名 beef-wellington-2x.webp GET 200 
包 beef-stew-2x.webp GET 200 
mw Carnitas-tacos-2x.webp GET 200 
mw pulled-pork-sandwiches-2x.webp GET 200 
mm sweet-sour-pork-2x.webp GET 200 
ww pork-fried-rice-2x.webp GET 200 
至 chicken-kiev-2x.webp GET 200 
w chicken-tacos-2x.webp GET 200 
是 chicken-marsala-2x.webp dT 200 
国 chicken-alfredo-2x.webp GET 200 
图 6-21 


辐 


Type 
webp 
png 

webp 
webp 
webp 
webp 
webp 
webp 
webp 
webp 
webp 
webp 
webp 
webp 
webp 
webp 
webp 
webp 


Ny 


Initiator 


index):43 

index):54 
Other 
Other 
Other 
Other 
Other 
Other 
Other 
Other 
Other 
Other 
Other 
Other 
Other 
Other 
Other 
Other 


Size 
32.8 KB 
358B 
22.8 KB 
38.3 KB 
22.1KB 
24.9 KB 
23.2 KB 
42.1KB 
37.3 KB 
31.5 KB 
37.9 KB 
32.5 KB 
23.0KB 
28.5 KB 
17.3 KB 
68.0KB 
36.2 KB 
35.7KB 


页 面 加 载 时 懒 加 载 


下 载 的 图 像 的 图 像 


Time 


316 ms 
60 ms 
608 ms 
721 ms 
621 ms 
641 ms 
516 ms 
752 ms 
728 ms 
659 ms 
693 ms 
669 ms 
525 ms 
623 ms 
386 ms 
874 ms 
698 ms 
705 ms 


示 懒 加 载 图 像 的 网 络 瀑布 图 


Timeline - Start Time 10.0 


国 国 加 国 


国 国 国 国 


TT 


懒 加 载 程序 编写 完成 后 ， 目 前 仍然 存在 最 后 一 个 难题 ， 为 关闭 JavaScript 的 用 户 提供 回 退 。 


6.4.3 ”考虑 不 支持 JavaScript 的 用 户 


有 些 用 户 关 闭 了 JavaScript 或 者 无 法 使 用 JavaScript (虽然 占 比 似乎 很 小 )。 有 了 懒 加载 程 序 
脚本 ， 这 些 用 户 将 不 会 看 到 除 图 像 占 位 符 以 外 的 任何 东西 ， 如 图 6-22 所 示 。 


懒 加 载 依赖 于 JavaScript 进 行 加 载 的 图 像 


Beef Recipes 


Filet Mignon 


Pot Roast 


图 6-22 ”在 关闭 JavaScript 的 浏览 器 上 懒 加 载 脚 本 的 效果 。 图 像 不 会 加 载 ， 因 为 
JavaScript 无 法 运行 
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这 是 不 可 接受 的 ， 即 使 它 只 影响 一 小 部 分 用 户 。 不 过 好 消息 是 使 用 <noscript> 来 修复 很 容 
易 。 你 可 以 修改 你 的 标记 ,方法 是 添加 <noscript> 标 签 , 在 src 和 srcset 属性 中 显 式 设置 图 
像 源 ， 如 下 所 示 


<noscript> 
<picture> 
<source srcset="img/fish-and-chips-2x.webp 2x, 
img/fish-and-chips-1lx.webp 1x" 
type="image/webp"> 
<source srcset="img/fish-and-chips-2x.jpg 2x, 
img/fish-and-chips-1x.jpg 1x" 
type="image/jpeg"> 
<img src="img/fish-and-chips-1x.jpg" class="recipeImage"> 
</picture> 
</noscript> 


你 会 注意 到 ，<noscript> 标 签 正 是 <picture> 元 素 在 懒 加 载 程 序 修 改 它们 之 前 的 状态 。 添 
加 此 代码 时 ， 应 该 添加 到 懒 加 载 的 <picture> 元 素 之 后 。 试 着 在 浏览 器 中 关闭 JavaScript， 然 后 
重新 加 载 页 面 ， 你 将 看 到 如 图 6-23 所 示 的 内 容 。 


Fish Recipes 


由 于 禁用 了 JavaScript， 
人 懒 加 载 的 图 像 永远 不 
会 加 载 


<noscript> 标 签 内 的 
“一 图 像 能 够 加 载 


所 < 


Fish and Chips 


图 6-23 ”<noscript> 标 签 的 效果 。 图 像 占 位 符 和 在 <noscript> 标 签 中 加 载 的 图 像 都 
是 可 见 的 ， 因 为 禁用 JavaScript 时 图 像 占 位 符 不 会 隐藏 
懒 加 载 程序 的 图 像 占 位 符 和 通过 <noscript> 标 签 加 载 的 图 像 都 是 可 见 的 。 这 个 效果 不 能 提 
供给 客户 ， 因 此 需要 确保 在 关闭 JavaScript 时 隐藏 图 像 占 位 符 。 解 决 这 个 问题 的 办 法 很 简单 。 首 
先 ， 在 <ntml> 元 素 中 添加 一 个 no-js 的 类 : 


<html] class="no-js"> 


使 用 这 个 类 定位 到 CSS 标记 中 懒 加 载 的 目标 图 像 。 为 此 ， 请 在 less/components 文件 夹 中 的 
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global_small.less 结尾 添加 一 个 简单 规则 : 


.no-js .lazyt 
display: none; 


} 


添加 后 ， 通 过 less .sh ( Windows 系统 : less .pbat ) 重新 编译 LESS 文件 。 

发 生 了 什么 ?通过 在 <html > 标签 中 添加 一 个 no-js 类 ， 并 在 DOM 中 添加 一 个 隐藏 .1azy 
元 素 的 样式 ， 即 可 确保 在 关闭 JavaScript 时 ， 不 会 同时 看 到 图 像 占 位 符 和 菜谱 图 像 。 

但 这 意味 着 占 位 符 对 于 那些 启用 了 JavaScript 的 浏览 器 是 隐藏 的 ! 为 了 解决 这 个 问题 ， 需 要 
添加 一 点 内 联 脚本 。 当 JavaScript 可 用 时 ， 它 会 从 <html> 标 签 中 删除 no-js 类 。 在 文本 编辑 需 
中 打开 index.html， 并 在 </head> 结 束 标签 之 前 添加 一 行 脚本 : 


<script>document .getElementsByTagName ("html") [0] .className="";</script> 


最 终 的 结果 是 ， 使 用 JavaScript 的 浏览 如 将 受益 于 懒 加 载 ， 而 那些 禁用 JavaScript 的 浏览 器 
仍 将 显示 图 像 。 这 些 用 户 不 会 从 懒 加 载 脚本 中 受益 ,但 他 们 将 获得 可 接受 的 体验 。 


删除 HTML 元 素 类 名 的 注意 事项 
前 面 的 方法 使 用 了 “焦土 政策 ”， 通 过 清空 整个 <html> class 属性 来 删除 no-js 类 。 如 
果 有 其 他 需要 保留 的 类 (例如 Modernizr 类 ), 可 以 使 用 removeClass() 这 样 的 jQuery 函数 有 
选择 地 删除 no-js 类 。 更 好 的 方法 是 考虑 使 用 原生 的 classList 方法 (参见 第 8 竟 。 


客户 现在 满意 了 。 让 我 们 总 结 所 学 ， 准 备 进 入 下 一 章 。 
6.5 小 结 


本 章 我 们 学 习 了 以 下 图 像 优化 技术 ， 并 了 解 了 其 性 能 优势 。 

口 雪 怕 图 将 多 个 图 像 连 接 为 单个 文件 ， 从 而 减少 HITP 请 求 。 可 以 通过 使 用 svg-sprite 

Node 实用 程序 ， 从 一 组 单独 的 SVG 图 像 轻松 生成 SVG 雪 才 图 。 

D 并 非 所 有 浏览 器 都 支持 SVG 图 像 。 如 果 你 的 用 户 中 有 一 部 分 不 能 使 用 SVG, 你 可 以 使 用 

Grumpicon 在 线 实 用 程序 ， 提 供 PNG 回 退 。 

口 在 用 户 访问 网 站 时 下 载 的 数据 中 ， 图 像 占 很 大 一 部 分 。 可 以 通过 imagemin Node 实用 程 

序 以 及 特定 于 各 种 图 像 格 式 的 imagemin 插件 ， 减 小 网 站 图 像 的 大 小 。 

口 如 果 有 很 大 一 部 分 用 户 使 用 Chrome 或 基于 Chrome 的 浏览 器 ， 可 以 通过 Google 的 WebP 
图 像 格 式 ， 提 供 具 有 同等 视觉 质量 上 且 体 积 更 小 的 图 像 。 使 用 Node 中 的 imagemin-webp 

插件 ， 还 可 以 生成 有 损 WebP 版 本 来 代替 JPEG， 生 成 无 损 WebP 版 本 来 代替 PNG。 

口 并 非 所 有 人 都 使 用 Chrome, 所 以 你 不 能 仅仅 把 Web 图 像 放 到 你 的 网 站 上 ,并 期 望 它们 对 
每 个 人 都 有 效 。 可 以 结合 使 用 <picture> 元 素 与 <source> 元 素 的 type 属性 ， 为 不 支持 
WebP 的 浏览 絮 指 定 已 有 的 图 像 类 型 回 退 。 
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口 延迟 加 载 图 像 ( 懒 加 载 ) 是 缩短 网 站 初始 加 载 时 间 的 一 个 好 方法 。 此 技术 还 通过 避免 加 
载 访问 者 可 能 看 不 到 的 图 像 来 节省 带宽 。 通 过 编写 懒 加 载 脚本 ， 你 就 可 以 在 自己 的 网 站 
上 实现 此 行为 。 还 可 以 通过 使 用 <noscript> 标 签 的 解决 方案 ， 为 关闭 了 JavaScript 的 用 
户 做 打算 。 
有 了 这 些 技术 , 你 将 能 够 确保 网 站 在 容纳 丰富 视觉 内 容 的 同时 , 不 会 牺牲 访问 速度 和 兼容 性 。 
下 面 进入 字体 的 世界 ， 学 习 如 何 优化 字体 的 传输 ! 


更 快 的 字体 


本 章 内 容 

口 通过 选择 限制 字体 数量 

口 构建 你 自己 的 efont-face 级 联 

口 了 解 服务 器 压缩 对 较 旧 字体 格式 的 好 处 

口 通过 取 子 集 限 制 字体 大 小 

口 使 用 unicode-range CSS 属性 提供 字体 子 集 
口 通过 JavaScript API 管 理 字 体 的 加 载 


我 们 在 第 6 章 学 习 了 如 何 优化 图 像 , 但 事实 证 明 , 页 面 的 许多 其 他 方面 也 能 够 从 优化 中 受益 
本 章 将 探索 网 站 中 另 一 种 常见 的 资源 类 型 : 字体 。 字 体 是 许多 网 站 中 负载 的 一 个 重要 部 分 ， 而 它 
们 的 传输 方式 值得 仔细 推 项 。 
自从 字体 被 引入 开发 人 员 的 工具 包 以 来 ， 对 字体 的 支持 状态 就 始终 不 是 很 稳定 。 尽 管 CSS 
efont-face 属性 得 到 了 普遍 的 支持 ， 但 对 用 于 骨 入 的 字体 格式 的 支持 程度 则 参差 不 齐 。 
TrueType 和 Embedded OpenType 格式 在 旧式 和 现代 浏览 器 中 都 得 到 了 广泛 的 支持 ,所 以 你 可 
能 想 随 便 使 用 其 中 的 一 种 格式 。 但 是 这 些 字体 格式 对 Web 来 说 并 不 是 最 优 的 ， 0 
缩 。 较 新 的 格式 ， 如 WOFF 和 WOFF2， 占 用 空间 较 小 ， 最 适合 怠 人 人 。 即 使 这 样 ， 你 也 可 以 使 用 
旧 的 字体 格式 。 它 们 应 该 作为 efont-face 级 联 的 一 部 分 , 但 只 能 作为 不 支持 更 新 、 更 优 格式 的 
旧 浏 览 需 的 最 后 的 选择 。 
本 章 将 从 基础 知识 开始 , 学 习 如 何 为 给 定 页 面 选择 必需 的 最 少 字体 和 字体 变 体 , 以 及 如 何 创 
建 最 佳 的 efont-face 级 联 ; 还 将 探索 服务 器 压缩 如 何 减 小 日 字体 格式 的 大 小 , 以 及 如 何 通过 取 
子 集 减 小 所 有 字体 格式 的 大 小 。 最 后 ， 使 用 CSS font-aisplay 属性 控制 字体 的 显示 方式 ， 并 
回 退 到 JavaScript 中 的 原生 字体 加 载 API， 然 后 回 退 到 旧 浏 览 器 的 Font Face Observer 库 。 我 们 这 
就 开始 吧 
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7.1 


明智 地 使 用 字体 


字体 的 最 佳 使 用 始 于 选择 。 尽 管 像 Google Fonts 和 Adobe Typekit 这 样 的 字体 提供 商 为 帮助 
你 选择 字体 做 了 很 多 工作 , 但 有 时 你 需要 自己 托管 字体 , 或 许 是 因为 这 些 服务 中 没有 你 需要 的 字 
体 ， 又 或 者 是 客户 有 特殊 需求 ， 因 而 不 能 使 用 它们 。 

说 到 客户 ,“ 传 奇 音 调 ” 这 个 客户 又 回来 了 。 他 们 为 一 篇 更 受 欢 迎 的 文章 买 了 广告 ， 想 用 更 
漂亮 的 字体 修饰 那 一 页 。 本 节 将 选择 网 站 所 需 的 字体 和 字体 变 体 , 将 它们 转换 为 适当 的 格式 , 并 
构建 你 自己 的 efont-face 级 联 。 开 始 前 ， 需 要 下 载 客 户 网 站 ， 并 使 用 以 下 命令 在 本 地 运行 : 

git clone https://github.com/webopt/ch7-fonts.git 

ed ony=ronts 


npm install 
node http.js 


下 载 网 站 并 运行 Web 服务 器 后， 将 浏览 器 转向 http://localhost:8080， 你 就 可 以 开始 了 ! 


7.1.1 


选择 字体 和 字体 变 体 


乍 一 看 , 客户 网 站 的 设计 可 以 通过 添加 字体 来 改进 。 该 项 目的 设计 者 推荐 了 一 种 很 好 的 无 衬 


线 字 体 Open Sans。 为 了 提供 帮助 ， 设 计 师 将 Open Sans 字体 系列 放 在 css 文件 夹 的 子 文件 夹 
open-sans 中 。 浏 览 这 个 文件 来， 你 会 发 现 10 种 样式 。 显 然 ， 我 们 需要 谨慎 选择 ， 否 则 页 面 加 载 
时 间 可 能 会 显著 增加 。 


想 要 跳 过 ? 
如 果 你 陷入 困境 ， 并 想 跳 到 后 面 (或 者 你 急于 看 到 结果 )， 可 以 使 用 git 命令 。 键 入 git 


checkout -f fontface， 你 将 看 到 本 节 所 做 工作 的 最 终结 果 。 


那么 ， 如 何 梳理 出 需要 的 字体 变 体 呢 ? 第 一 步 很 容易 。Open Sans 字体 系列 有 两 种 样式 : 斜 
体 和 普通 体 。 对 于 这 个 网 站 的 内 容 ， 你 只 需要 普通 的 、 非 斜体 的 变 体 ， 所 以 可 以 将 选择 范围 缩 
小 到 5 种 不 同 粗细 的 字体 ， 从 Light 到 Extra Bold。 


5 


种 并 不 算 多 , 但 是 你 还 可 以 去 掉 一 些 不 必要 的 字体 粗细 。 这 需要 与 设计 师 交 谈 ， 以 了 解 客 


户 的 需求 。 幸 运 的 是 ,他 们 已 经 非常 清楚 自己 的 需求 ， 并 给 了 你 一 个 小 型 示意 图 , 告诉 你 应 该 使 
用 什么 样 的 字体 变 体 。 如 图 7-1 所 示 ， 它 注释 了 所 有 字体 变 体 〈 在 本 例 中 是 字体 粗细 )。 
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字体 粗细 : 
300 
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physicist. While we needn't go into the background of him and his achievements, or even 
the heavy details about resistance, ohms, or impedance, this is an area that is often 
confusing to people. The following is a primer on ohms and how it relates to speakers 
and amplifiers. My hope is that very simply, any confusion on the topic will be eliminated. a 
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~ 
N 
少 ALL ABOUT OHMS 
/ | Electrical resistance within speakers, amplifiers, as well as all basic electrical 
connections, is expressed in ohms, named after George Simon Ohm, a German 


> SOME OF THE USUAL QUESTIONS 


When running one cabinet, for example a standard Marshall 4 x 12 cabinet at 16 ohms, it is easy to 
presume and know that the amplifier head should also be set to 16 ohms for best performance. However, in ” 国 


字体 粗细 : 字体 粗细 : 
700 400 


图 7-1 客户 的 内 容 页 ， 已 经 注释 了 所 有 字体 粗细 
如 你 所 见 , 变 体 由 其 CSS font -weight 属性 值 决定 。font-weignt 指定 受 影响 文本 的 “ 粗 
细 ”。 此 规范 可 以 在 预 设 值 (如 normal、bold、bolaqer 或 lighter ) 中 生成 ,也 可 以 通过 更 
具体 的 整数 值 ( 以 100 为 增 量 ， 从 最 细 的 值 100 开始 ， 到 最 粗 的 值 900 结束 ) 生成 。 大 多 数 元 
素 的 默认 值 是 normal, 相当 于 值 400。 表 7-1 将 font -weight 与 其 对 应 的 Open Sans 字体 变 体 
一 一 映射 ， 并 指示 是 否 在 页 面 上 使 用 它们 。 


表 7-1 Open Sans 字体 系列 中 可 用 的 字体 变 体 、 其 对 应 的 font -weight 值 ， 以 及 页 面 上 是 否 使 用 它们 


font-weight 值 字体 变 体 文件 名 页 面 是 否 使 用 
300 OpenSans-Light.ttf 是 
400 OpenSans-Regular.ttf 是 
600 OpenSans-SemiBold.ttf 否 
700 OpenSans-Bold.ttf 是 
800 OpenSans-ExtraBold.ttf 否 


现在 知道 你 需要 哪 种 字体 变 体 了 ， 就 可 以 放弃 那些 不 需要 的 ， 并 使 用 这 3 种 : OpenSans- 
Light.ttf、OpenSans-Regular.ttf 和 OpenSans-Bold.ttf。 

通过 挑选 并 且 只 选择 需要 的 字体 , 即 可 通过 提供 必需 资源 来 减轻 用 户 的 负担 。 字 体 资 源 有 时 
很 大 ， 所 以 应 该 有 所 舍弃 。 完 成 后 ， 你 可 以 继续 编写 自己 的 efont-face 级 联 。 
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7.1.2 构建 你 自己 的 efont-face 级 联 

识别 字体 变 体 并 选择 相应 的 字体 文件 后 ， 可 以 开始 将 它们 骨 入 客户 的 网 站 。 但 是 编写 
efont-face 声明 之 前 ， 需 要 将 TrueType 字 体 文件 转换 为 所 需 的 其 他 格式 。 

1. 转换 字体 


为 只 有 Open Sans 的 TrueType( TTF ) 字体 可 用 ， 所 以 需要 将 它们 转换 为 所 需 的 其 他 3 种 
格式 。 表 7-2 列 出 了 这 些 格式 及 其 浏览 器 支持 。 


表 7-2 字体 格式 及 其 文件 扩展 名 和 浏览 器 支持 。Opera Mini 不 支持 自 定义 字体 


字体 格式 扩展 名 浏览 器 支持 
TrueType ttf 除 IE8 及 更 早 版 本 外 
Embedded OpenType eot IE6+ 
WOFF woff 除 Android 浏 览 器 4.3 及 更 早 版 本 和 IE8 及 更 早 版 本 外 
WOFF2 woff2 


Firefox 39+、Chrome 36+、Opera 23+、Android 浏览 需 4.7+、Chrome/Firefox 
for Android， 以 及 Opera Mobile 36+ 

可 以 使 用 各 种 工具 进行 转换 (通过 Web 服务 或 下 载 获取 )。 可 以 非常 方便 地 使 用 npm 获得 一 
些 命令 行 实用 程序 ， 具 体 如 下 。 
口 ttf2eot: 将 TTF 转换 为 Embedded OpenType ( EOT )。 
口 ttf2woff; 将 TTF 转换 为 WOFF。 
口 ttf2woff2; 将 TTF 转换 为 WOFF2。 

如 果 你 的 网 站 字体 只 有 OpenType ( OTF ) 格式 ， 则 可 以 下 载 ot f2ttf Node 包 , 在 继续 之 前 
将 OTF 文件 转换 为 TTF。 但 是 在 Open Sans 这 个 例子 里 ， 你 是 从 TTF 开始 的 ， 因 此 不 需要 这 个 
实用 程序 。 要 想 全 局 安装 这 些 实用 程序 ， 以 便 以 在 系统 的 任何 位 置 使 用 它们 ， 请 运行 以 下 命令 : 


npm install -g ttf2eot ttf2woff ttf2woff2 


这 可 能 需要 一 分 钟 左 右 的 时 间 , 具体 取决 于 网 络 连 接 。 完 成 后 , 你 将 能 够 从 任何 文件 夹 运 行 
这 些 命令 。npm 完成 后 ， 即 可 开始 转换 字体 。 


警告 : 留心 许可 协议 ! 
字体 的 使 用 条 款 可 能 因 字 体 而 异 ， 因 此 需要 阅读 随 附 的 许可 协议 。Open Sans 真正 是 免费 
的 ,并 为 其 使 用 提供 了 明确 的 权限 。 其 他 字体 创建 者 可 能 要 求 你 购买 使 用 权 。 即 使 进行 了 支付 ， 
睹 入 也 可 能 存在 限制 。 一 定 要 检查 你 想 使 用 的 字体 的 使 用 条 款 并 遵守 ! 


要 转换 Open Sans 字体 ， 请 在 终端 打开 css/open-sans 文件 夹 ， 然 后 为 正 生 成 EOT 文件 : 


ttf2eot OpenSans-Light.ttf OpenSans-Light.eot 
ttf2eot OpenSans-Regular.ttf OpenSans-Regular.eot 
ttf2eot OpenSans-Bold.ttf OpenSans-Bold.eot 
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这 将 生成 所 需 的 所 有 EOT 字体 。 要 使 用 ttf2woff 生成 WOFF 字体 ,过 程 和 语法 与 ttf2eot 
相同 : 
ttf2woff OpenSans-Light.ttf OpenSans-Light .woff 


ttf2woff OpenSans-Regular.ttf OpenSans-Regular.woff 
ttf2woff OpenSans-Bold.ttf OpenSans-Bold.woff 


最 后 ， 使 用 tt2woff2 创建 WOFF2 文件 。tt2woff2 的 语法 有 些 不 同 : 


cat OpenSans-Light.ttf | ttf2woff2 >> OpenSans-Light .woff2 
cat OpenSans-Regular.ttf | ttf2woff2 >> OpenSans-Regular.woff2 
cat OpenSans-Bold.ttf | ttf2woff2 >> OpenSans-Bold.woff2 


类 UNIX 系统 与 Windows 系统 
在 前 面 的 示例 中 ，cat 命令 用 于 通过 管道 操作 符 将 字体 文件 的 内 容 输 出 到 ttf2woff2 程 
序 。 而 在 Windows 系统 中 ，type 命令 相当 于 cat。 


通过 这 些 命令 , 你 已 经 生成 了 最 优 6font - face 级 联 所 需 的 所 有 字体 。 让 我 们 继续 能 入 这 些 
字体 ! 


2. 构建 efont-face 级 联 

构建 efont-face 级 联 的 方式 非常 重要 。 如 果 操作 正确 ， 它 会 向 浏览 器 提示 哪些 格式 可 用 ， 
并 提供 最 佳 格 式 。 对 于 现代 浏览 器 ， 你 可 以 从 高 度 压缩 格式 ( 如 WOFF 和 WOFF2 ) 中 获 益 ; 而 
对 于 较 旧 的 浏览 器 ， 你 可 以 安全 地 回 退 到 次 优 的 EOT 和 TTF 格式 。 


SVG 字体 注意 事项 
如 果 你 有 广 入 字体 的 经 验 ， 可 能 想 知道 SVG 字体 适合 用 在 哪里 。 简 言 之 ， 它 们 已 经 不 再 
适用 了 .SVG 字体 在 主流 浏览 器 的 未 来 版 本 中 已 被 弃 用 或 正在 被 弃 用 , 最 好 完全 不 要 使 用 它们 。 


打开 css 文件 夹 中 的 styles.css， 开 始 编写 afont -face 代码 。 代 码 清单 7-1 显示 了 需要 的 第 
一 种 字体 的 efont-face 代码 ， 对 应 Open Sans 的 常规 字号 。 需 要 将 其 放 在 styles.css 的 开头 。 


代码 清单 7-1 Open Sans Regular 的 efont-face 定义 


字体 粗细 
诅 入 字体 对 应 的 
@font-facet{ 字体 系列 字符 串 
ny ee Sans Regular"; local () 源 会 在 下 载 
Wel . Se 人 
font-st normal 远程 文件 之 前 检查 用 
完 3 、 
字体 二 ， 户 系统 上 的 字体 
src: local("Open Sans Regular"), 
样式 WOFF2 
local ("OpenSans-Regular"), 版 本 
url("open-sans/OpenSans-Regular.woff2") format ("woff2"), 
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WOFF 

版 本 url("open-sans/OpenSans-Regular.woff") format ("woff") 
url("open-sans/OpenSans-Regular.eot") format ("embedded-opentype"), 
url("open-sans/OpenSans-Regular.ttf") format ("truetype"); 


这 个 efont-face 级 联 中 详细 描述 了 从 最 佳 情况 到 最 坏 情况 的 各 种 场景 。 我们 看 看 src 属性 : 
这 个 属性 接受 指定 字体 的 来 源 列 表 , 以 逗号 分 隔 。 来源 会 按 指定 的 顺序 加 载 。 首 先 使 用 local () 
声明 检查 用 户 系 统 上 的 字体 。 这 是 最 理想 的 结果 ， 因 为 这 种 情况 下 浏览 器 不 必 下 载 任何 内 容 。 

如 果 找 不 到 local 源 ， 浏 览 器 将 从 本 节 前 面 转换 的 一 组 字体 格式 中 下 载 一 个 。 下 载 的 格式 
取决 于 浏览 器 的 功能 。 我 们 当然 希望 一 开始 就 顺利 , 所 以 要 从 最 好 的 格式 开始 , 即 WOFF2 版 本 。 
为 了 获得 更 广泛 的 支持 ,需要 在 性 能 较 差 的 浏览 器 中 使 用 越 来 越 不 理想 的 格式 。 图 7-2 详细 说 明 


了 这 个 过 程 。 


用 户 


二 


浏览 器 检查 
本 地 版 本 


用 户 请 求 带 有 
@font-face 


声明 的 CSS 


浏览 器 尝试 加 载 
外 部 托管 字体 


浏览 器 找 不 到 
本 地 版 本 


字体 格式 兼容 ， 
则 加 载 字 体 


图 7-2 ”用户 浏 览 器 处 理 efont-face 级 联 的 过 程 。 浏 览 器 先 搜索 本 地 安装 的 
版 本 〈 如 果 指 定 )， 如 果 找 不 到 ， 将 遍历 所 有 efont-face src() 调 
用 ， 以 获得 相同 字体 的 各 种 格式 
当 请 求 WOFF2 字体 格式 失败 时 ， 浏 览 器 将 检查 列表 中 的 下 一 个 格式 ， 即 稍微 不 太 理想 的 
WOFF 版 本 。 到 目前 为 止 ， 大 多 数 浏览 器 能 够 成 功 加 载 WOFF 版 本 。 而 其 余 的 浏览 器 将 回 退 到 
EOT 或 TTF 文件 。 
@font-face 声明 编写 完成 后 ， 需 要 修改 body 选择 器 上 的 font-family 属性 ， 将 此 字体 
作为 文档 的 默认 字体 引用 ， 如 下 所 示 : 


font-family: "Open Sans Regular", Helvetica, Arial, sans-serif; 


此 属性 会 按 优先 次 序 指定 多 个 字体 。 首 先 指定 open Sans Regular， 因 此 它 是 首选 字体 。 
接 下 来 的 几 个 是 回 退 字体 ， 以 防 所 依赖 的 6font -face 无 法 加 载 。 指 定 字 体 后 ,可 以 在 不 同 的 浏 
览 器 中 重新 加 载 文 档 ， 你 会 注意 到 ， 该 字体 已 经 在 使 用 了 。 

如 果 在 不 同 浏览 器 中 查看 Network 选项 卡 ， 将 看 到 Firefox 和 Chrome 使 用 WOFF2 文件 。 
Safari ( 在 一 些 旧 版 本 的 macOS 上 ) 使 用 WOFF 文件 。IE8 这 样 的 旧 浏 览 器 则 下 载 EOT 文件 。 
如 果 将 TTF 字体 文件 安装 到 系统 上 ， 你 会 注意 到 根本 没有 下 载 字体 ， 而 是 从 计算 机 引用 。 可 以 通 


浏览 器 找到 本 地 
安装 的 字体 并 加 载 


字体 格式 不 兼容 ， 
尝试 下 一 种 格式 
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过 删除 所 有 local () 源 来 规避 此 行为 , 但 这 种 方法 对 生产 环境 的 网 站 并 不 是 最 佳 方法 。 应 该 始终 
确保 通过 删除 所 有 local () 源 引用 来 测试 远程 字体 文件 是 否 正常 工作 ， 并 在 将 网 站 部 署 到 生产 
环境 之 前 重新 添加 它们 。 

我 们 需要 做 的 最 后 一 件 事 , 是 为 其 他 两 种 粗细 的 字体 创建 efont-face, 如 代码 清单 7-2 所 示 。 


代码 清单 7-2 ”其 余 Open Sans 字体 变 体 的 efont-face 声明 
efont-facet 
font-family: "Open Sans Light" 
font-weight: 300; 
font-style: normal; 
src: local("Open Sans Light"), 
local ("OpenSans-Light"), 
url("open-sans/OpenSans-Light .woff2") format ("woff2"), 
("open-sans/OpenSans-Light .woff") format ("woff"), 
url("open-sans/OpenSans-Light.eot") format ("embedded-opentype"), 
("open-sans/OpenSans-Light.ttf") format ("truetype"); 


} 


@font-facel{ 
font-family: "Open Sans Bold"; 
font-weight: 700; 
font-style: normal; 
src: locall("Open Sans Bold"), 
local ("OpenSans-Bold"), 
url("open-sans/OpenSans-Bold.woff2") format ("woff2"), 
("open-sans/OpenSans-Bold.woff") format ("woff"), 
url("open-sans/OpenSans-Bold.eot") format ("embedded-opentype"), 
("open-sans/OpenSans-Bold.ttf") format ("truetype "); 


} 
编写 完 这 些 @font-face 之 后 ， 需 要 在 styles.css 中 搜索 值 为 300 和 700 的 font-weight 
属性 。 对 于 font -weight 属性 为 700 的 选择 需 ， 添 加 以 下 规则 : 


font-family: "Open Sans Bold"; 


对 于 font-weignt 属性 为 300 的 选择 器 ， 添 加 以 下 规则 : 


font-family: "Open Sans Light" 


现在 ， 该 网 站 具有 的 Open Sans 字体 系列 足以 通过 不 同 的 字体 粗细 显示 文档 中 的 所 有 文本 。 

祝贺 你 ! 你 通过 优选 最 小 、 性 能 最 佳 的 字体 格式 ， 仍 入 了 字体 ， 这 样 可 以 减少 用 户 的 加 载 时 间 。 
即使 昌 的 浏览 器 得 到 的 格式 不 太 理 想 ， 它们 仍然 会 显示 自 定义 字体 。 当 然 ,加载 这 些 旧 格式 并 不 
容易 ， 而 这 就 是 服务 右 压 缩 的 用 武之 地 ! 


7.2 压缩 EOT 和 TTF 字体 格式 


回想 一 下 ，@font-face 级 联 开头 使 用 的 格式 性 能 很 高 (如 WOFF2 和 WOFF )， 而 之 后 的 
两 种 格式 虽然 得 到 了 很 好 的 支持 ， 但 并 不 那么 理想 。 这 背后 的 原因 是 : WOFF2 和 WOFF 格式 是 
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内 部 压缩 的 。 压 缩 算法 是 这 些 格式 的 固有 特性 ， 它 们 不 需要 服务 器 压缩 。 
TTF 和 EOT 字体 格式 没有 压缩 ， 因 此 是 服务 器 压缩 的 最 住 候 选 格 式 。 服 务 器 压缩 二 进 制 文 
件 类 型 可 能 会 带 来 开销 ,但 是 为 了 加 快 这 些 优化 程度 较 低 的 格式 的 传输 ， 这 个 过 程 是 值得 的 。 
默认 情况 下 , 将 本 地 Node Web 服务 器 与 compression 模块 一 起 使 用 时 , 会 压缩 这 些 格式 。 
但 是 其 他 Web 服务 器 可 能 默认 压缩 这 些 格式 ,也 可 能 不 压缩 ,需要 进一步 配置 ,例如 , Apache Web 
服务 器 需要 使 用 mod_geflate 压缩 这 些 文件 ,代码 清单 7-3 显示 了 Apache 服务 器 配置 的 一 部 分 ， 
这 些 配置 指定 TTF 和 EOT 字体 的 压缩 。 


代码 清单 7-3 配置 Apache 服务 器 ， 压 缩 TTF 和 EOT 字体 


pe 

为 TTF 字体 mime module 

添加 媒体 类 国 <IfModule mime_ module> sli 字体 

型 定义 AdaType font/ttf .ttf 次 加 守信 大 
AddType font/eot .eot 型 定义 

</IfModule> 


检查 是 否 安 装 了 <IfModule mod_deflate.c> 
deflate 模块 AddOutputFilterByType DEFLATE font/ttf font/eot 四 


</IfModule> 根据 媒体 类 型 压 
缩 :ttf 和 .eot 文件 


这 只 是 配置 Web 服务 器 以 压缩 字体 的 一 个 例子 。 要 配置 其 他 Web 服务 器 以 启用 相同 功能 ， 
尚 需要 进一步 研究 。 本 节 的 重点 是 指出 压缩 这 些 文件 类 型 能 带 来 性 能 提升 。 压 缩 这些 格 式 的 好 处 
如 图 7-3 所 示 ， 其 中 比较 了 OpenSans-Regular.tf 和 OpenSans-Regulareot 字 体 文件 压缩 前 后 的 情况 。 
EOT 和 TTF 字 体 在 服务 器 压缩 前 后 的 比较 


225 KB 


200 KB 


175 KB 


150 KB 


125 KB 


100 KB 


75 KB 


50 KB 


25 KB 


0KB 


EOT 和 TTF 字 体 文件 


图 7-3 压缩 前 后 Open Sans Regular 字 体 的 大 小 变化 。 在 本 例 中 ， 与 未 压缩 版 本 相 比 ， 
压缩 收益 约 为 45%， 从 212.26 KB 减 小 到 113.76 KB。EOT 的 压缩 比 与 之 相似 
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在 这 些 旧 格式 上 使 用 服务 器 压缩 有 明显 的 好 处 。 压 缩 它们 可 以 获得 约 等 于 WOFF 的 文件 大 
小 ， 因 此 对 于 不 支持 WOFF 的 浏览 器 来 说 ， 这 是 一 种 均衡 器 。WOFF?2 仍然 胜 过 压缩 的 TTF 和 
EOT 文件 ,但 同样 ， 并 非 每 个 浏览 器 都 支持 WOFF2。 我 们 的 目标 是 尽 可 能 为 每 个 浏览 器 提供 最 
好 的 结果 ， 这 是 更 接近 实现 该 目标 的 另 一 种 方法 。 

对 于 较 小 的 资源 来 说 ,压缩 是 有 效 的 , 但 是 对 于 较 大 的 资源 (例如 TTF 和 EOT 字 体 ), 压缩 
可 能 需要 更 长 的 时 间 ， 从 而 导致 TTFB 更 长 。 一定 要 测试 哪 种 情况 会 使 加 载 时 间 较 短 。 对 于 较 小 
的 文件 ， 压 缩 处 理 时 间 几 乎 可 以 忽略 。 
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这 个 网 站 看 起 来 更 出 色 了 , 你 的 客户 很 高 兴 。 但 客户 想 知 道 是否 有 办 法 减轻 因 这 些 字体 而 增 
加 的 负担 。 向 任何 网 站 添加 字体 都 会 造成 一 个 结果 : 有 更 多 的 数据 要 通过 网 络 传输 。 添 加 3 种 字 
体 之 后 ,你 在 下 载 WOFF2 字体 的 浏览 器 上 额外 增加 了 185 KB 的 数据 。 而 不 太 有 能 力 的 浏览 器 
则 回 退 到 WOFF 和 其 他 版 本 ， 这 意味 着 增加 大 约 260 KB 的 额外 数据 。 这 太 多 了 ， 一定 有 办 法 规 
避 的 。 

幸运 的 是 ， 我 们 可 以 使 用 取 子 集 技术 减 小 字体 大 小 。 取 子 集 只 选择 字体 文件 中 所 需 的 字符 ， 
丢弃 其 余 字 符 。 这 项 技术 的 实际 应 用 包括 按 语 言 对 字体 取 子 集 。 例如， 如 果 一 个 网 站 的 内 容 是 英 
语 ， 那 么 拉丁 字符 就 足够 了 。 如 果 你 使 用 过 Google 字体 ， 那 么 你 已 经 利用 过 取 子 集 技术 ， 因 为 
选择 字体 后 ， 它 是 服务 设置 对 话 框 的 一 部 分 ， 如 图 7-4 所 示 。 


2. Choose the character sets you want: 


Greek (greek) (| Greek Extended (greek-ext) v Latin (latin) 


Vietnamese (vietnamese)' | Cyrillic Extended (cyrillic-ext) 


“Latin Extended (latin-ext) © Cyrillic (cyrillic) 
图 7-4 根据 语言 分 类 的 Google 字 体 子 集 


尽管 Google Fonts 和 Adobe Typekit 等 服务 提供 了 子 集 ， 但 某 些 情况 下 ， 你 可 能 不 能 使 用 第 
三 方 服务 ， 特 别 是 当 网 站 的 设计 需要 字体 服务 中 没有 的 字体 ， 或 字体 需要 订阅 时 。 由 于 这 些 和 许 
多 潜在 的 其 他 原因 ,最 好 知道 如 何 自己 生成 字体 子 集 ， 以 掌控 网 站 的 最 佳 字 体 传输 。 本 节 将 学 习 
如 何 使 用 命令 行 工具 手动 生成 字体 子 集 , 以 及 如 何 使 用 unicode-range CSS 属性 为 多 语言 网 站 
提供 字体 。 


7.3.1 手动 生成 字体 子 集 


使 用 一 组 基于 Python 的 名 为 fonttools 的 实用 程序 , 可 以 在 命令 行 上 生成 字体 的 子 集 。 本 
节 还 将 了 解 Unicode 范围 、 安 装 Python ( 如 果 未 预 装 )， 并 使 用 pip 包 管理 器 安装 fonttools 
库 。 我 们 还 将 使 用 pyftsubset 命令 行 实 用 程序 为 字体 生成 子 集 。 
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1. 理解 Unicode 范围 

要 理解 字体 子 集 的 工作 机 制 ， 需 要 知道 Unicode 是 什么 ， 以 及 各 种 语言 的 字形 在 预定 义 的 
Unicode 范围 中 的 情况 。 

如 果 你 是 有 经 验 的 Web 开发 者 , 想必 你 听 说 过 Unicode, 但 也 许 不 知道 它 到 底 是 什么 。Unicode 
是 规范 所 有 语言 字符 表示 方式 的 标准 。 针 对 各 种 语言 中 的 字符 ， 目 前 有 超过 120 000 个 Unicode 
保留 位 ， 并 且 该 标准 在 不 断 发 展 ， 以 容纳 更 多 字符 。 

Unicode 的 设计 理念 不 仅 是 为 了 容纳 如 此 广泛 的 字符 ， 更 是 为 了 在 使 用 Unicode 字符 集 时 ， 
以 一 致 的 方式 为 它们 保留 空间 。 广泛 使 用 的 Unicode 字符 集 的 最 佳 例子 是 UTF-8, 它 是 Web 上 使 
用 的 事实 标准 。 使 用 Unicode 字符 集 时 ， 所 有 文档 中 为 字符 保留 的 空间 都 是 相同 的 。 例 如 ， 小 写 
Pp 总 是 位 于 U+0070 的 Unicode 码 点 。 图 7-5 中 的 表单 显示 了 这 个 码 点 及 其 附近 的 码 点 。 


0003 0013 0023 0033 0043 | 0053 0063 0073 


图 7-5 Unicode.org 的 Unicode 字符 表 的 一 部 分 ， 显 示 了 字形 及 其 码 点 。 小 写 的 p 通 过 
其 Unicode 码 位 U+0070 标识 


你 需要 了 解 Unicode 字符 ， 因 为 字体 使 用 了 Unicode 码 点 为 特定 字符 保留 空间 。 

还 可 以 使 用 Unicode 码 点 生成 字体 子 集 。 有 些 字体 包含 的 字符 远 远 多 于 大 多 数 用 例 所 需 的 字 
符 。 如 果 只 用 英语 编写 内 容 , 那么 就 不 需要 字体 可 能 提供 的 西里 尔 字 符 。 通 过 生成 字体 子 集 只 导 
出 适合 网 站 内 容 的 字形 ， 就 会 得 到 较 小 的 字体 文件 。 正 如 你 现在 知道 的 那样 ， 较 小 的 资源 就 意味 
着 较 短 的 页 面 加 载 时 间 。 

生成 字体 子 集 的 典型 方法 是 使 用 Unicode 范围 。 范 围 可 以 通过 两 个 Unicode 码 点 表示 ,其 中 
包含 了 它们 之 间 的 所 有 码 点 。 一 个 流行 的 Unicode 范围 是 基本 的 拉丁 范围 ， 它 包括 英文 字母 表 中 
的 小 写 和 大 写字 符 .数字 0~9, 以 及 大 量 特殊 符号 ( 如 标点 符号 ), 这 个 范围 对 应 U+0000 到 U+007F。 
将 此 范围 输入 子 集 工 具 时 ， 它 会 将 指定 的 范围 导出 到 较 小 的 文件 中 。 
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寻找 其 他 Unicode 范围 
Unicode 联盟 的 Unicode 标准 官方 网 站 包含 了 该 标准 为 之 保留 空间 的 所 有 语言 的 详尽 列表 。 
要 查找 Unicode 范围 ,请 转 到 http://unicode.org/charts 并 浏览 列表 。 单 击 要 查找 的 语言 ， 该 语言 的 
PDF 图 表 在 文档 的 左上 角 和 右上 角 提 供 了 范围 。 例如， 亚美尼亚 字符 的 范围 是 U+0530-058F。 


本 节 稍 后 将 通过 一 个 名 为 pyftsubset 的 命令 行 工具 为 Open Sans 字体 生成 基本 的 拉丁 文 
Unicode 范围 子 集 。pyftsubset 是 font-tools 库 的 一 部 分 。 但 使 用 这 个 工具 之 前 需要 先 安装 。 


2. 安装 fonttools 


要 安装 fonttools 很 容易 。 我 们 在 第 3 章 下 载 并 安装 了 Ruby， 以 便 使 用 gem 包 管 理 器 安 
装 uncss 实用 程序 。 本 节 将 执行 类 似 的 操作 ， 只 是 这 次 要 安装 的 是 Python， 它 提供 对 pip 包 管 
理 需 的 访问 。 可 以 使 用 pip 安装 fonttools 包 , 这 个 包 托 管 了 名 为 pyftsubset 的 命令 行 字 体 
子 集 实用 程序 。 

如 果 你 是 Mac 用 户 ，Python 已 预 安装 。 许 多 Linux 发 行 版 也 预 装 了 Python。 要 查看 系统 上 
是 否 已 经 安装 了 Python， 最 简单 的 方法 是 运行 python --version 命令 。 如 果 安 装 了 Python， 
版 本 号 将 显示 在 屏幕 上 , 然后 就 可 以 开始 了 。fonttools 的 开发 者 声明 了 该 程序 需要 Python 2.7 
或 者 Python 3.3 ， 或 者 更 高 版 本 。 

Windows 系统 未 预 装 Python ， 但 这 只 是 一 个 小 麻烦 。 要 安装 Python， 请 到 Python 官网 获取 
安装 程序 。 安 装 过 程 已 经 简化 ， 只 需 完成 一 系列 步 又 即 可 。 

安装 Python 后 ， 需 要 在 命令 行 键 和 人 pip -V 以 确保 pip 包 管 理 器 可 用 。 如 果 收 到 错误 信息 
且 没 有 看 到 版 本 号 ， 则 需要 安装 pip。 由 于 此 时 Python 是 可 用 的 ， 因 此 可 以 通过 运行 
easy_install pip 命令 轻 松 解决 此 问题 ,完成 后 ,pip 安装 程序 将 可 用 ,可 以 键入 pip install 
fonttools 安装 fonttools 包 。 

安装 fonttools 之 后 ， 可 以 通过 在 命令 行 输入 pyftsubset --help 检查 pyftsubset 
实用 程序 是 否 可 用 。 如 果 屏 幕 缓冲 区 中 有 帮助 文本 ， 则 该 实用 程序 已 安装 ,下 面 可 以 开始 生成 字 
体 子 集 了 。 


3. 使 用 pyftsubset 生成 字体 子 集 

既然 fonttools 已 经 安装 ，pyftsubset 也 开始 工作 了 ， 是 时 候 进 入 正题 了 。 因 为 网 站 内 
容 全 是 英文 的 ， 所 以 需要 对 基本 的 拉丁 文 Unicode 范围 生成 子 集 。 此 范围 包含 英文 字母 表 中 使 用 
的 所 有 字母 和 数字 ， 以 及 你 需要 的 所 有 符号 ， 如 标点 符号 。 在 Unicode 官方 网 站 上 查找 基本 拉丁 
文 范 围 时 ， 你 会 发 现 该 范围 是 U+0000 到 U+007F。 这 就 是 你 将 提供 给 pyftsubset 实用 程序 以 
生成 子 集 的 信息 。 

要 使 用 此 实用 程序 开始 生成 字体 子 集 ， 请 打开 一 个 终端 窗口 ， 并 转 到 客户 网 站 文件 夹 中 的 
css/open-sans 目录 。pyftsubset 中 需要 输入 TTF、OTF 或 WOFF 文件 ,为 了 简单 起 见 , 对 原始 
TTF 文件 生成 子 集 ， 并 使 用 7.1 节 中 的 转换 器 ， 将 TTF 字体 子 集 重新 转换 为 所 需 的 其 他 格式 。 

找到 正确 的 文件 夹 后 ， 首 先 使 用 以 下 命令 设置 OpenSans-Regularttf 字 体 文件 : 


而 
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pyftsubset OpenSans-Regular.ttf -~-unicodes=U+0000-007F 
--output-file=OpenSans-Regular-BasicLatin.ttf --name-IDs='*' 


这 条 命令 中 做 了 很 多 事情 ， 我 们 对 其 进行 分 解 。 图 7-6 列 出 了 每 个 选项 。 


输入 字体 用 来 生成 子 集 
文件 名 的 Unicode 范 围 


SS 


pyftsubset OpenSans-Regular.ttf --unicodes=U+0000-007F 
--output-file=OpenSans-Regular-BasicLatin.ttf --name-IDs='*" 


~ NS 4 
输出 字体 保留 所 有 名 称 表 
文件 名 (区 分 大 小 写 ! ) 


图 7-6 用 pyftsupset 生成 字体 子 集 。 首 先 指定 输入 文件 ， 然 后 指定 输入 字体 中 子 
集 字符 的 Unicode 范围 ， 之 后 指定 输出 文件 名 。 最 后 一 个 选项 用 于 保留 名 称 
表 中 的 所 有 条 目 ， 从 而 确保 与 字体 转换 器 更 好 地 兼容 


稍 等 片刻 后 ， 程 序 将 完成 并 输出 OpenSans-Regular-BasicLatin.ttf， 正 如 --output-file 标 
志 中 指定 的 那样 ,查看 这 个 文件 与 OpenSans-Regular.ttf, 你 会 发 现 已 经 缩小 了 大 约 90%, 从 212.26 
KB 缩小 到 17.68KB , 大 大 缩减 了 字体 的 整体 大 小 。 而且, 这 甚至 不 是 最 佳 的 字体 格式 。Open Sans 
中 有 很 多 字符 ， 因 为 它 广泛 支持 多 种 语言 。 你 不 一 定 总 能 从 字体 子 集中 得 到 这 样 的 收益 , 但 是 花 
时 间 去 看 看 有 什么 可 能 还 是 值得 的 。 

宣布 “胜利 ”之 前 ， 仍 然 需要 使 用 以 下 命令 ， 将 此 字体 子 集 转换 为 EOT、WOFF 和 WOFF2 
格式 : 


ttf2eot OpenSans-Regular-BasicLatin.ttf OpenSans-Regular-BasicLatin.eot ttf2woff 
OpenSans-Regular-BasicLatin.ttf OpenSans-Regular-BasicLatin.woff cat 
OpenSans-Regular-BasicLatin.ttf | ttf2woff2 >> 

OpenSans-Regular-BasicLatin.woff2 


转换 完 所 有 字体 后 ， 使 用 pyftsubset 对 OpenSans-Bold.ttf 和 OpenSans-Light.ttf 重复 相同 
的 字体 子 集 生成 过 程 ， 并 将 这 些 文件 转换 为 各 自 的 EOT、WOFF 和 WOFF2 版 本 。 然 后 需要 更 新 
styles.css 中 的 @font-face 源 ， 以 引用 新 的 子 集 字体 文件 。 


关于 特殊 符号 
生成 字体 子 集 时 , 请 记 住 应 用 该 字体 的 网 站 内 容 。 一 个 关于 咖啡 和 咖啡 产品 的 网 站 可 能 会 
使 用 其 他 语言 的 单词 ， 比 如 cafeg， 它 有 一 个 带 重 音 的 字符 。 基 本 的 拉丁 文 范围 缺少 这 些 字符 ， 
因此 需要 注意 包括 以 后 可 能 需要 的 字形 。 


通过 这 项 工作 , 我 们 已 经 大 小 缩小 了 字体 文件 。 根 据 字 体 的 格式 不 同 ， 可 以 将 字体 大 小 缩小 
85%~90%。 如 图 7-7 所 示 ， 这 意味 着 页 面 加 载 时 间 有 了 相当 大 的 改进 。 
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在 Chrome 中 生成 字体 子 集 前 后 
的 页 面 加 载 时 间 对 比 
(数值 越 低 越 好 : 使 用 Good 3G 节 流 配置 ) 


TTF (gzip) 


生成 子 集 前 WOFF 


WOFF2 


生成 子 集 后 


0 ms S00 ms 1000ms 1500ms 2000ms 2500 ms 
加 载 时 间 
图 7-7 生成 字体 子 集 前 后 的 加 载 时 间 对 比 。 加 载 时 间 改 进 了 200% 以 上 。 加 载 时 间 包 
括 网 站 所 有 资源 的 时 间 。 在 这 些 测试 中 ， 服 务 器 压缩 了 TrueType 字体 (EOT 
由 于 不 兼容 而 省 略 ; EOT 文件 大 小 几乎 与 TTF 相同 ) 


到 目前 为 止 ， 你 可 能 觉得 进展 已 经 势不可挡 了 。 下 一 个 挑战 是 使 用 efont-face 级 联 中 的 
unicode-range 属性 ， 根 据 语言 进行 子 集 设置 。 使 用 此 属性 ， 可 以 通过 Unicode 范围 以 特定 语 
言 为 目标 ， 就 像 对 pyftsubset 所 做 的 那样 。 


7.3.2 使 用 unicode-range 属 性 传输 字体 子 集 


客户 希望 以 多 种 语言 呈现 内 容 。 这 个 网 站 在 一 些 欧 亚 国家 特别 受 欢 迎 ,尤其 是 俄罗斯 ( 不 管 
是 什么 原因 )。 

这 有 点 困难 ， 因 为 客户 需要 翻译 内 容 。 但 是 你 可 以 在 内 容 翻译 人 员工 作 的 同时 工作 ， 因 为 客 
户 已 经 给 了 你 俄 文 占 位 符 的 副本 。 

问题 是 , 这 个 网 站 需要 能 够 提供 俄语 使 用 的 西里 尔 字 符 。 可 以 通过 以 下 两 种 方式 之 一 实现 此 
目标 : 
口 提供 整个 字体 文件 ， 以 便 无 论 情 况 如 何 ， 所 有 语言 都 可 以 随意 使 用 所 需 的 字符 ; 
口 只 提供 该 网 页 所 需 的 子 集 。 
嘟 种 方式 更 好 ?如果 你 猜 是 第 二 种 ， 那 就 对 了 。 正 如 在 7.3.1 中 所 看 到 的 那样 ， 提 供 完整 的 
字体 会 妨碍 性 能 ,因此 ,我们 希望 适当 地 为 其 他 语言 提供 子 集 。 在 这 种 情况 下 ,你 不 想 强 制 英语 
用 户 下 载 字体 的 西里 尔 字 符 子 集 。 
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这 就 是 unicode-range CSS 属性 的 作用 。 此 属性 是 在 efont-face 定义 中 指定 的 ， 其 值 是 
Unicode 代码 点 的 范围 和 /或 集合 , 格式 与 输入 pyftsubset 程序 的 格式 相同 。 如 果 浏 览 器 检测 到 
页 面 内 容 包含 此 范围 内 的 字符 ， 它 将 下 载 字体 ， 否 则 不 会 下 载 。 

这 个 属性 没有 受到 普遍 的 浏览 器 支持 ， 要 想 使 用 ， 可 能 需要 通过 回 退 策略 。 目 前 
unicode-range 没有 完善 的 polyfill, 所 以 回 退 通常 需要 替代 方法 而 不 是 polyfill。 本 节 稍 后 会 演 
示 男 一 种 方法 。 

本 节 将 学 习 如 何 使 用 pyftsubset 生成 包含 所 需 西 里 尔 字符 的 新 字体 子 集 。 转 换 后 将 它们 
骸 入 新 的 efont-face， 并 使 用 unicode-range 属性 通知 浏 览 句 关联 的 afont-face 要 应 用 于 
哪些 字符 。 然 后 讨论 使 用 JavaScript 的 回 退 方 法 。 

开始 这 个 字体 子 集 的 练习 前 , 需要 使 用 git 切换 到 新 的 代码 分 支 。 输入 命令 git checkout 
-f _ unicoderange。 首 先 会 看 到 有 两 个 HTML 文件 : 一 个 是 以 前 看 到 的 文章 的 英文 版 本 
( index-en.HTML )， 另 一 个 是 使 用 西里 尔 字符 的 俄 文 版 本 (index-ru.HTML )。 让 我 们 开始 吧 ! 


1. 生成 西里 尔 字 体 子 集 

使 用 unicodqe-range 将 适当 的 字体 子 集 传输 给 俄语 用 户 之 前 ， 需 要 使 用 pyftsubset 创 
建 这 些 字 符 的 子 集 。 

正如 你 可 能 猜 到 的 那样 , 使 用 此 程序 生成 西里 尔 字符 子 集 的 方法 与 生成 基本 拉丁 文子 集 的 方 
法 几乎 相同 。 唯 一 的 区 别 是 ， 需 要 不 同 的 Unicode 点 范围 来 获取 字符 。 

基本 拉丁 文 Unicode 范围 很 简单 ， 而 西里 尔 字符 Unicode 范围 很 复杂 。 它 包含 了 3 个 不 同 的 
逗号 分 隔 范 围 ， 并 且 都 需要 传递 给 pyftsubset 的 --unicodes 选项 。 在 本 例 中 ， 我 将 提供 这 
些 范围 ,你 也 可 以 自己 在 Unicode 网 站 上 找到 它们 。 要 为 OpenSans-Regular.ttf 字 体 文件 创建 西里 
尔 字符 子 集 ， 请 在 命令 行 的 css/open-sans 文件 夹 中 键入 以 下 命令 : 

pyftsubset OpenSans-Regular.ttf --unicodes=U+0400-045F,U+0490-0491,U+04B0- 

04B1 --output-file=OpenSans-Regular-Cyrillic.ttf --name-IDs='*' 

此 命令 与 用 于 生成 Open Sans Regular 基本 拉丁 文子 集 的 命令 之 间 的 区 别 在 于 ， 传 递 给 
--unicodes 选项 的 Unicode 范围 以 及 输出 的 文件 名 。 完 成 后 ， 你 将 在 该 文件 夹 中 看 到 一 个 名 为 
OpenSans-Regular-Cyrillic.ttf 的 新 文件 ,与 以 前 一 样 ,需要 将 此 字体 转换 为 EOT、WOFF 和 WOFF2 
版 本 : 

ttf2eot OpenSans-Regular-Cyrillic.ttf OpenSans-Regular-Cyrillic.eot 

ttf2woff OpenSans-Regular-Cyrillic.ttf OpenSans-Regular-Cyrillic.woff 


cat OpenSans-Regular-Cyrillic.ttf | ttf2woff2 >> OpenSans-Regular- 
Cyrillic.woff2 


上 述 这 些 转换 完成 后 , 依次 重复 这 个 过 程 , 为 OpenSans-Light.ttf 和 OpenSans-Bold.ttf 生 成 对 
应 的 西里 尔 字 母子 集 OpenSans-Light-Cyrillic.ttf 和 Open-Sans-Bold-Cyrillic.ttf。 然后 将 这 些 文件 转 
换 为 相应 efont-face 定义 所 需 的 格式 。 现 在 , 你 可 以 开始 学 习 unicode-range 属性 并 在 新 的 
西里 尔 文 efont-face 中 使 用 它 了 1! 


A -本 
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2. 使 用 unicode-range 属性 


在 CSS 中 使 用 unicode-range 属性 ， 与 在 pyftsubset 中 使 用 字体 子 集 时 将 Unicode 范 
围 传递 给 --unicodes 选项 没有 太 大 区 别 。 在 文本 编辑 器 中 打开 客户 网 站 styles.css， 并 查看 
@font-face 声明 ， 你 将 注意 到 unicode-range 已 用 于 基本 拉丁 文子 集 : 


unicode-range: U+0000-007F; 


这 个 
清单 7-4 显示 了 此 属性 变 体 的 使 用 。 


代码 清单 7-4 unicode-range 值 


U+0026; | 


属性 的 格式 简单 但 灵活 。 它 接受 任意 数量 的 单个 Unicode 代码 点 、 


以 单一 值 表示 单个 


范围 和 通配符 。 代 码 


/* 单个 值 */ Unicode 码 点 
unicode-range: 
和 -加 由 连 字符 分 隔 的 Unicode 
unicode-range: U+0000-007F; 码 点 范围 
Ee 使 用 问号 指定 
Hh st U+002? 和 Unicode 码 点 
1 三 3 + ? 有 a 
a 的 通配符 范围 


/* 多 个 值 */ 


unicode-range: U+0000-007F, U+0100 


， U+02??; 


由 逗号 分 隔 


的 多 个 值 


如 有 果 为 拉丁 文子 集 指定 Unicode 范围 , 那么 在 浏览 希 中 访问 该 页 的 俄语 版 本 ， 基 本 拉丁 文子 


Name 


index-ru.html 
| styles.css 
_ | logo.svg 


,ohm.svg 


_| OpenSans-Light-BasicLatin.woff2 


加 载 的 
字体 


_ | OpenSans-Bold-BasicLatin.woff2 


_| OpenSans-Regular-BasicLatin.woff2 


集 根本 不 应 该 加 载 ， 对 吗 ? 如 图 7-8 所 示 ， 人 情况 并 非 如 此 。 


Method Status 
GET 200 
GET 200 
GET 200 
GET 200 
GET 200 
GET 200 
GET 200 


图 7-8 尽管 已 将 unicode-range 拓 
页 面 使 


性 设置 为 仅 对 1 


示 基 本 拉丁 字体 子 集中 的 字符 的 


] 这 些 字体 ,但 基本 拉丁 字体 子 集 依然 在 页 痢 


“等 等 ! 发 生 了 什么 ? ”这 可 能 是 你 


i 的 俄语 版 本 上 加 载 


第 一 个 想法 ， 但 事实 上 ， 这 个 版 本 的 网 站 使 用 的 是 你 


创建 的 基本 拉丁 子 集中 的 字符 。 这 个 字体 子 集 包含 的 内 容 不 仅 在 英语 中 很 常见 , 在 俄语 中 也 很 常 


见 ， 比 如 标点 符号 和 数字 字符 。 由 于 许多 原因 ， 基 本 拉丁 语 Unicode 范围 内 的 字符 在 许多 语言 
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都 很 常见 。 因 此 ， 这 个 示例 中 的 unicode-range 属性 工作 正常 : 它 只 在 需要 时 获取 字体 子 集 ! 
你 要 做 的 是 , 防止 西里 尔 字 体 子 集 被 下 载 到 不 需要 它们 的 页 面 上 。 为 此 , 需要 为 每 个 新 的 西 

里 尔 字 母 字 体 子 集 建立 一 个 新 的 6font-face， 并 使 用 它们 自己 的 unicode-range 值 。 代 码 清 

单 7-5 显示 了 Open Sans Regular 西里 尔 子 集 的 efont-face 声明 ， 要 将 其 添加 到 styles.css 中 。 


代码 清单 7-5 Open Sans Regular 西里 尔 子 集 的 efont-face 声明 
@font-facel{ 


font-family: "Open Sans Regular"; 于 = SN 
en 2 可 以 在 同一 字体 
i - < 系列 中 使 用 多 个 
ont-style: normal; SY 
src: local("Open Sans Regular"), - 字符 集 
local ("OpenSans-Regular"), 
url("open-sans/OpenSans-Regular-Cyrillic.woff2") format ("woff2"), 


西里 尔 字 url("open-sans/OpenSans-Regular-Cyrillic.woff") format ("woff"), 

体 子 集 的 url("open-sans/OpenSans-Regular-Cyrillic.eot") 

源 格式 format ("embedded-opentype"), 
url("open-sans/OpenSans-Regular-Cyrillic.ttf") format ("truetype"); 


unicode-range: U+0400-045F,U+0490-0491,U+04B0-04B1; a < 
字体 应 用 在 以 下 
unicode-range 


} 

将 这 个 新 字体 添加 到 styles.css 后 ， 还 要 为 Open Sans Light 和 Open Sans Bold 的 西里 尔 字母 
子 集 添 加 其 余 的 efont-face 声明 。 添加 时 , 请 确保 适当 更 新 font-family 和 1ocal () 的 源 名 
称 。 它 们 的 值 与 这 些 字 体 变 体 的 基本 拉丁 子 集 相同 。 

完成 剩 下 的 efont-face 声明 后 , 将 能 够 看 到 unicode-range 如 何 影 响 字 体 传输 。 我 们 已 
经 打开 了 index-ru.html， 所 以 只 要 在 另 一 个 选项 卡 中 打开 index-en.html， 并 在 Chrome 开发 者 工 
具 中 检查 每 个 页 面 的 网 络 实用 程序 。 英 文 版 和 俄 文 版 页 面 的 Network 选项 卡 输出 如 图 7-9 所 示 。 


一 、 


Name Method Status |Name Method Status 
_ OpenSans-Light-Cyrillic.woff2 GET 200 | OpenSans-Light-BasicLatin.woff2 GET 200 
_ OpenSans-Regular-Cyrillic.woff2 GET 200 _ OpenSans-Regular-BasicLatin.woff2 GET 200 
_ OpenSans-Bold-Cyrillic.woff2 GET 200 _ | OpenSans-Bold-BasicLatin.woff2 GET 200 
|_ OpenSans-Light-BasicLatin.woff2 GET 200 

| OpenSans-Bold-BasicLatin.woff2 GET 200 


_ | OpenSans-Regular-BasicLatin.woff2 GET 200 


俄 文 版 英文 版 

图 7-9 俄 文 版 页 面 ( 左 ) 与 英文 版 页 面 ( 右 ) 下 载 的 字体 (即使 它们 都 使 用 相同 的 样 
式 表 ), unicode-range 属性 会 检测 文档 中 的 所 有 字符 是 否 存在 于 定义 的 范围 

内 ， 如 果 是 ， 则 提供 相关 的 efont -face 资源 
你 会 注意 到 , 俄 文 版 页 面 拉 取 了 基本 拉丁 字符 的 西里 尔 字 符 子 集 ， 而 英文 版 页 面 不 需要 西里 

尔 字 符 ， 依 据 unicode-range 属性 忽略 了 西里 尔 子 集 。 

这 种 技术 对 于 任何 多 语言 网 站 (含有 使 用 不 同 字符 范围 的 语言 ) 都 很 有 用 。 大 多 数 西 方 语言 ， 
如 德语 、 西 班 牙 语 和 法 语 , 使 用 一 个 更 广泛 的 拉丁 文子 集 就 足够 了 , 但 希腊 语 和 俄语 等 语言 由 于 
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字母 表 的 不 同 而 需要 更 多 子 集 。 亚洲 语 言 尤其 受益 于 这 种 方法 ,因为 亚洲 语言 可 以 有 数 千 个 字符 。 
并 非 所 有 浏览 器 都 支持 此 属性 ， 所 以 你 需要 考虑 如 何 回 退 到 与 昌 浏 览 器 更 兼容 的 方法 。 


3. 旧 浏 览 器 的 回 退 方案 

尽管 unicode-range 是 一 个 很 好 的 特性 ， 但 是 它 并 未 得 到 普遍 的 支持 。 虽 然 在 较 新 的 
WebKit 浏览 器 和 Firefox 中 得 到 了 很 好 的 支持 , 但 在 你 阅读 本 文 时 , 其 他 浏览 器 可 能 还 不 支持 它 。 
这 些 浏览 需 将 忽略 unicode-range 属性 并 下 载 CSS 文件 中 的 所 有 字体 子 集 ， 而 不 会 进行 判断 。 
图 7-10 显示 了 Safari 9 中 英文 版 页 面 上 的 行为 ; 所 有 字体 都 加 载 在 页 面 上 , 仿佛 unicogde-range 
属性 不 存在 。 


Name Domain Type Method 
4 OpenSans-Regular-Cyrillic.woff localhost Font GET 
| 用 OpenSans-Regular-BasicLatin.woff | localhost Font GET 
I OpenSans-Light-Cyrillic.woff localhost Font GET 
[4 OpenSans-Light-BasicLatin.woff localhost Font GET 
I OpenSans-Bold-Cyrillic.woff localhost Font GET 
4 OpenSans-Bold-BasicLatin.woff localhost Font GET 


图 7-10 不 考虑 unicode-range 属性 ， 加 载 到 英文 版 页 面 上 的 西里 尔 文子 集 。 
该 图 片 显示 的 行为 发 生 在 Safari 中 


那么 ,对 于 不 支持 unicode-range 的 浏览 器 ,我 们 能 做 些 什么 呢 ? 一 种 可 能 的 方法 是 ， 如 
果 字 形 数量 的 增加 不 会 对 页 面 性 能 造成 太 大 的 损害 ,就 创建 更 广泛 的 子 集 。 这 两 个 版 本 的 页 面 仍 
然 会 下 载 额外 的 字符 , 但 是 与 对 3 种 字体 变 体 的 6 个 请 求 不 同 , 大 小 将 分 布 在 对 3 种 字体 变 体 的 
请 求 上 。 

这 种 方法 不 适用 于 日 文 等 语言 的 内 容 。 在 日 文中 ,字形 的 数量 可 以 大 幅 增加 字体 文件 的 大 小 。 
虽然 用 这 些 语言 为 网 站 编写 代码 的 开发 人 员 可 能 期 望 有 大 量 的 网 站 负载 专用 于 字体 , 但 将 这 些 子 
集 推送 给 不 需要 它们 的 用 户 是 不 对 的 。 这 对 你 的 访客 来 说 不 是 一 件 好 事 。 因 此 ， 解 决 方案 在 于 
JavaScript。 

对 于 多 语言 网 站 ， 开 发 人 员 使 用 <html> 标 签 的 lang 属性 定义 文档 的 语言 。 这 些 语言 代码 
符合 ISO 639-1 标准 。 在 index-ru.html 中 ， 代 码 类 似 于 <html lang="ru">。 可 以 编写 一 点 内 联 
JavaScript 来 检查 此 标签 中 的 语言 代码 。 如 果 查 找到 的 是 需要 的 语言 代码 ， 则 加 载 一 个 单独 的 较 
小 样式 表 ， 其 中 包含 要 延迟 加 载 的 子 集 的 @efont -face 声明 。 

要 为 俄语 内 容 实现 这 一 点 ,首先 要 将 西里 尔 文 @font -face 定义 移 到 一 个 名 为 ru.css 的 单独 
的 CSS 文件 中 , 然后 使 用 <1ink> 标 签 引 用 ru.css, 该 标签 包含 一 个 存储 其 位 置 的 占 位 符 data-ref 
属性 ， 以 及 一 个 存储 其 目标 内 容 语言 代码 的 dGata-1lang 属性 。 这 将 完全 阻止 加 载 CSS， 直 到 它 
被 下 面 的 <script> 块 求 值 。 如 果 脚 本 确定 <html> 1ang 属性 的 值 与 <1ink> 标 签 的 data-1lang 
属性 的 值 匹配 ， 它 将 立即 下 载 并 解析 该 样式 表 。 代 码 清单 7-6 显示 了 这 个 机 制 的 作用 。 
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代码 清单 7-6 使 用 JavaScript 延迟 加 载 字 体 子 集 


<!ldoctype html> lang 属性 设置 为 语言 
<html lang="ru"> 代码 “ru”( 俄 语 ) 
<head> 


<title>JlereHnapHble TOHXSXPYyem-3monoO He CNHydMnTc4 .</title> 
<link rel="stylesheet" href="css/styles.css" type="text/css"> 
<link rel="stylesheet" data-href="css/ru.css" 


ee 西里 尔 字 符 子 集 的 字 
data-lang="ru" type="text/css"> 体 被 移动 到 另 一 个 
将 <html> 标 签 的 | <script> C 上 文件 | 
lang 属性 保存 到 (function (document){ S 
变量 中 var documentLang = document .querySelector ("htm1l") 
.getAttribute("lang"), 
linkCollection = document Et 
遍历 <link> .querySelectorAll ("link[data-href]"); 将 带 有 data-href 
标签 的 集合 属性 的 <1ink> 标 签 
证 旦 
for(var i = 0; i < linkCollection.length; I++) 1{ 保存 到 变量 中 


] 


Var linkLang = 1LinkCollection[ 


i 
获取 <1ink> 标 签 的 .getAttripbute("data-lang"), 
小 分 
linkHref = linkCollection[i] 
data-lang 属性 
) . 


.getAttribute("data-href"); | 获取 <link> 标 签 的 
data-href 属性 


以 查看 它 是 否 与 文档 linkCollection[i].setAttribute("href", linkHref); 


语言 匹配 将 合适 的 <link> 标 签 的 data-ref 
属性 更 改 为 ref 属性 


检查 aata-lang 属性 加 if(documentLang === linkLang)t{ 


}) (document ) ; 
</script> 
<noscript> 


<link rel="stylesheet" href="css/ru.css" type="text/css"> 
</noscript> <noscript> 回 退 ， 
3 用 于 下 载 字体 子 集 


由 于 这 个 <script> 块 接近 文档 的 开头 ， 浏 览 锅 几乎 会 立即 发 现 它 ， 所 以 它 执行 得 更 快 。 这 
样 可 以 将 延迟 降 到 最 低 。 

这 段 脚 本 还 可 以 处 理 多 个 遵循 aata-href 模式 的 <1ink> 标 签 。 这 为 代码 提供 了 灵活 性 , 以 
包含 对 附加 字体 子 集 所 需 的 多 个 <Link> 标 签 的 引用 。 可 以 将 此 代码 放 在 多 语言 网 站 每 个 页 面 的 
<head> 中 ， 这 样 只 会 加 载 该 页 面 语言 所 需 的 CSS 和 字体 子 集 。 

还 应 该 考虑 禁用 JavaScript 的 用 户 。 为 了 解决 这 个 问题 ， 我 们 通过 般 套 在 <noscript> 元 素 
中 的 <1ink> 标 签 来 提供 字体 子 集 。 这 个 回 退 不 是 最 佳 的 ， 因 为 它 不 会 基于 <html> lang 属性 的 
值 进行 区 分 ， 但 它 可 以 确保 用 户 获得 页 面 所 需 的 字体 子 集 。 

这 样 , 客户 网 站 才能 在 每 个 浏览 器 中 获得 与 unicode-range 属性 相同 的 最 终结 果 。 图 7-11 
说 明了 这 个 脚本 对 Safari 加 载 的 文章 的 俄 文 版 和 英文 版 的 影响 。 


Ly 


| 
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Name Name 


<>| index-en.html < index-ru.html 

cs] Styles.css cl Styles.css 

匣 | logo.svg cs5) ru.css 

匣 | ohm.svg 富 logo.svg 

A OpenSans-Regular-BasicLatin.woff 本 ohm.svg 

.Al OpenSans-Light-BasicLatin.woff A OpenSans-Regular-Cyrillic.woff 
A OpenSans-Bold-BasicLatin.woff A OpenSans-Regular-BasicLatin.woff 


.Al OpenSans-Light-Cyrillic.woff 
.Al OpenSans-Light-BasicLatin.woff 
A OpenSans-Bold-Cyrillic.woff 
A OpenSans-Bold-BasicLatin.woff 
英文 内 容 页 俄 文 内 容 页 
图 7-11 Safari 中 英文 版 ( 左 ) 和 俄 文 版 ( 右 ) 内 容 页 上 Network 选项 卡 的 内 容 ， 每 个 
页 面 上 都 启用 了 回 退 脚本 。 英文 版 只 下 载 它 需要 的 字体 , 而 俄 文 版 则 获取 额外 
的 ru.css 和 其 中 包含 的 字体 子 集 


tt 


这 个 解决 方案 远 比 unicode-range 更 优 吗 ? 非 也 ! 它 只 是 说 明 如 果真 的 需要 , 可 以 精心 设 
计 JavaScript 解决 方案 。 可 以 为 更 简单 的 场景 编写 简单 的 JavaScript 解决 方案 。 服 务 器 端 方法 可 
能 对 你 也 更 有 意义 。 例 如 ， 可 以 将 语言 代码 保存 在 cookie 中 ， 并 使 用 服务 器 端 语 言 (如 PHP ) 
根据 条 件 将 字体 子 集 的 <1ink> 元 素 注入 文档 。 

随 着 时 间 的 推移 ，unicodqe-range 将 获得 更 多 支持 ， 直 到 最 终 为 较 旧 的 浏览 器 提供 不 太 理 
想 的 体验 更 为 可 取 。 如 果 unicode-range 不 受 某 个 浏览 器 的 支持 ,以 上 这 个 想法 是 你 可 以 选择 
的 方案 之 一 。 

7.4 节 将 学 习 如 何 通过 CSS 和 JavaScript 机 制 控 制 字 体 的 显示 方式 。 


7.4 优化 字体 加 载 


在 网 站 上 加 载 任何 资源 都 会 遇 到 陷阱 ， 这 些 陷阱 根据 资源 类 型 的 不 同 而 有 所 不 同 。 例 如 , 使 
用 <1ink> 标 签 加 载 CSS 会 阻塞 泻 染 ， 直 到 下 载 和 解析 样式 表 并 将 样式 应 用 于 文档 。 引 用 外 部 
JavaScript 文件 的 <script> 标 签 ， 被 放置 在 文档 顶部 时 ， 也 会 阻塞 页 面 泻 染 。 

字体 也 不 例外 , 加 载 它们 会 导致 一 些 问题 ， 这些 问题 会 对 网 站 的 可 读 性 产生 影响 。 本 节 将 了 
解 字体 加 载 时 可 能 出 现 的 视觉 异常 ， 然 后 学 习 如 何 使 用 font-daisplay CSS 属性 控制 字体 的 显 
示 方 式 ， 之 后 在 font -display 不 可 用 时 回 退 到 使 用 基于 JavaScript 的 字体 加 载 API。 如 果 两 种 
方法 对 浏览 器 都 不 可 用 ， 我 们 将 讲解 如 何 回 退 到 第 三 方 脚 本 以 获得 相同 的 结 


7.4.1 理解 字体 加 载 的 问题 


“传奇 音调 ”的 负责 人 发 来 一 封 电 子 邮 件 说 ， 虽 然 他 们 对 字体 的 外 观 很 满意 ， 但 他 们 注意 到 
页 面 上 的 文本 在 慢 速 连接 时 似乎 需要 一 段 时 间 才能 泻 染 出 来 。 虽 然 这 是 可 以 理解 的 ， 但 现实 是 ， 
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一 些 浏览 器 在 下 载 字 体 时 就 是 这 样 工作 的 。 客 户 所 指 的 现象 称 为 不 可 见 文本 的 闪烁 (Flash of 
Invisible Text, FOIT )。 

不 可 见 文本 的 闪烁 类 似 于 无 样式 内 容 的 闪烁 (Flash of Unstyled Content，FOUC ) 异常 ， 只 
是 前 者 发 生 在 文档 的 字体 完全 加 载 之 前 ， 处 理 的 是 不 可 见 的 文本 ， 而 不 是 无 样式 的 内 容 。 如 果 密 
切 注意 页 面 , 那么 即使 是 快速 连接 也 会 很 明显 。 随 着 连接 速度 的 降低 和 网 络 延 迟 的 增加 ， 这 个 问 
题 会 变 得 更 加 明显 。 慢 速 移动 网 络 (如 2G 和 3G ) 上 的 移动 设备 更 容易 受到 这 种 现象 的 影响 ， 如 
图 7-12 所 示 。 


AMPS 


LEGENDARYTONES flliss, recs LEGENDARYTONES dllisa 


GUITARS 
TONE TIPS 


THE INFORMATION SOURCE FOR GREAT GUITAR TONE 


ALL ABOUT OHMS 
Electrical resistance within speakers, amplifiers, as 


SOME OF THE USUAL QUESTIONS 
When running one cabinet, for example a stardard Marshall 4 x 12 cabinet at 16 ohms, it is easy to 


字体 依然 在 加 载 字体 加 载 完成 
图 7-12 页面 加 载 嵌入 式 字 体 时 ， 文 本 最 初 是 不 可 见 的 ( 左 )， 直 到 字体 完全 加 载 后 ， 
使 用 这 些 字 体 的 样式 文本 才 出 现 


这 似乎 是 一 个 恼人 的 bug， 但 这 是 浏览 器 的 设计 行为 。 浏 览 器 下 载 字体 时 会 等 待 泻 染 文本 ， 
以 避免 出 现 无 样式 文本 的 闪烁 (Flash ofUnstyled Text，FOUT )。FOUT 与 第 3 章 中 讨论 的 FOUC 
类 似 ， 只 是 文本 ( 而 不 是 没有 样式 的 页 面 ) 最 初 通过 系统 字体 加 载 ， 然 后 突然 用 应 用 的 自 定 义 字 

体重 新 泻 染 。 加 载 字体 时 ,浏览 器 将 只 在 这 段 时 间 隐 藏 文本 ， 超 过 这 个 时 间 段 ， 无 样式 的 文本 将 

在 字体 加 载 完 成 之 前 显示 。 加 载 字体 后 ,设置 无 样式 文本 的 样式 ， 如 图 7-13 所 示 。 


ALL ABOUT OHMS ALL ABOUT OHMSs 


了 Electrical resistance within speakers,@ Electrical resistance Within spe 


expressed in ohms, named after Geortl connections, is expressed in oh 

into the background of him and his § physicist. While we needn't go ini 

ohms, or impedance, this is an area th 如 even the heavy details about res 
无 样式 文本 带 样 式 文本 


图 7-13 字体 的 下 载 时 间 太 长 时 ， 文 本 最 终 将 变 为 可 见 ， 但 由 于 仍 在 加 载 字体 资源 而 未 设置 
样式 〈 左 )。 加载 所 有 字体 后 ， 文 本 将 带 有 样式 〈 右 )。 这 就 是 所 谓 的 FOUT 


浏览 器 的 本 意 是 好 的 , 但 是 如 果 连 接 中 断 , 用 户 可 能 要 等 待 3 秒 或 更 长 时 间 才 能 在 页 面 上 看 
到 文本 。 在 Safari 等 浏览 器 中 ,如果 请 求 暂停 ， 0 永远 不 会 显示 。 如 果 用 户 中 止 加 载 页 
面 或 者 字体 资源 加 载 失 败 ， 则 在 刷新 页 面 之 前 ， 内 容 可 能 始终 不 可 见 。 即 使 网 站 的 开发 人 员 在 
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font-family 属性 中 指定 了 系统 字体 的 回 退 ， 这 种 情况 也 是 存在 的 。 较 新 版 本 的 Chrome 试图 
自动 缓解 这 个 问题 ， 但 它 并 不 完美 ， 也 不 是 每 个 浏览 器 都 试图 在 底层 解决 这 个 问题 。 

我 们 能 做 什么 呢 ? 你 可 以 在 页 面 加 载 时 接受 FOUT 并 使 用 CSS font-display 属性 。 此 属 
性 能 够 确保 内 容 尽快 显示 ， 并 且 不 会 让 用 户 陷 人 文本 隐藏 的 困境 。 我 们 开始 吧 


7.4.2 使 用 CSS font-display 属 性 

CSS 中 的 font-display 属性 提供 了 一 种 便捷 的 办 法 ， 可 以 用 最 少 的 工作 量 控制 字体 的 显 
示 。 尽管 这 种 方法 在 撰写 本 文 时 仅 限于 Chrome 浏览 器 , 但 它 是 控制 字体 显示 的 首选 方法 。 首先 ， 
使 用 git 切换 到 网 站 代码 的 一 个 新 分 支 : 


git checkout font-display 


想 要 跳 过 ? 
如 果 你 遇 到 麻烦 , 或 者 想 直接 跳 到 后 面 查 看 已 完成 的 字体 加 载 API 代码 及 其 行为 , 可 以 在 
命令 行 中 输入 git checkout -f font-display-complete。 


从 GitHub 将 代码 下 载 到 计算 机 后 ， 在 文本 编辑 器 中 打开 index.html 和 styles.css。 


控制 字体 显示 的 方式 和 时 间 

首先 打开 Chrome 中 的 开发 者 工具 , 将 网 络 节 流 配置 更 改 为 Regular 3G， 就 很 容易 看 到 FOIT 
的 效果 。 一 般 来 说 ， 连 接 越 慢 ， 这 种 效果 就 越 明 显 。 要 精确 定位 字体 在 屏幕 上 可 见 的 时 刻 ， 可 以 
在 Network 选项 卡 中 切换 Capture Screenshots 按钮 ， 如 图 7-14 所 示 。 


[x 0 Elements Layers Console Sources N 


和 昌国 了 View: 二 二 Preserve log 轧 


Hide data URLs © 


捕捉 截图 开关 
图 7-14 在 Chrome 开 发 者 工具 中 切换 “捕捉 截图 ”的 按钮 


切换 此 按钮 并 重新 加 载 页 面 后 , 将 在 网 络 请 求 瀑布 图 上 方 填充 一 卷 页 面 加 载 的 屏幕 截图 。 然 
后 ,你 就 可 以 精确 定位 字体 出 现在 页 面 上 的 确切 时 刻 。 选 择 Regular 3G 节 流 配置 文件 后 , 文本 直 
到 页 面 开 始 下 载 大 约 875 毫秒 后 才 会 出 现 。 这 还 算 可 以 接受 , 但 根据 连接 速度 和 延迟 ， 结 果 可 能 
出 现 波动 。 我 们 的 目标 是 让 用 户 尽快 看 到 内 容 。 


通过 Web 进一步 学 习 font -display 属性 ! 
你 可 以 查看 我 写 的 文章 “font-display for the Masses”， 进 一 步 了 解 font-display 属性 ， 
包括 如 何 检测 浏览 器 对 该 属性 的 支持 。 
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控制 此 行为 的 一 种 方法 是 使 用 CSS 中 的 font-aisplay 属性 。 虽 然 不 受 普遍 支持 , 但 此 属 
性 可 以 使 你 在 很 大 程度 上 控制 字体 的 显示 方式 。 该 属性 需要 放 在 efont-face 声明 中 , 并 接受 以 
下 值 之 一 。 

DQ auto 默认 值 。 在 大 多 数 浏览 器 中 ， 这 类 似 于 plock。 

口 block 一 一 阻塞 文本 的 泻 染 ,， 直到 关联 的 字体 加 载 完成 。 这 是 上 一 节 中 描述 的 效果 , 也 是 

你 试图 克服 的 。 
口 swap 一 一 首先 显示 回 退 文本 。 加 载 字体 后 ， 将 字体 切换 为 自 定义 字体 。 
口 fallback 一 一 auto 和 swap 的 折衷 方案 。 短 时 间 内 (大约 100 毫秒 ) 文本 是 不 可 见 的 。 


如 果 之 后 字体 仍 未 加 载 ， 则 会 显示 回 退 文本 。 加 载 字 体 后 ， 将 字体 切换 为 自 定义 字体 。 
口 optional 几乎 和 fallback 一 样 , 只 是 浏览 絮 有 更 大 的 自由 来 决定 是 否 下 载 或 应 用 
字体 。 用 户 的 网 络 连接 足够 慢 时 ， 此 设置 生效 。 该 设置 对 于 自 定 义 字 体 完全 可 选 的 网 站 
特别 有 用 。 
在 “传奇 音调 ”文章 页 面 上 ， 我 们 将 使 用 font -display 的 swap 值 。 若 要 设置 此 属性 ， 
请 打开 css 文件 夹 中 的 styles.css, 并 在 文件 项 部 找到 @font-face 声明 。 在 第 一 个 afont-face 
声明 中 ,添加 font-display 属性 ， 如 代码 清单 7-7 所 示 。 


代码 清单 7-7 使 用 font-display 属性 
@font-facel{ 

font-family: "Open Sans Light"; 

font-weight: 300; 

font-style: normal; 

src: local ("Open Sans Light"), 
local ("OpenSans-Light"), 
url("open-sans/OpenSans-Light-BasicLatin.woff2") format ("woff2"), 
url("open-sans/OpenSans-Light-BasicLatin.woff") format ("woff"), 
url("open-sans/OpenSans-Light-BasicLatin.eot") 

format ("embedded-opentype"), 

url("open-sans/OpenSans-Light-BasicLatin.ttf") format ("truetype"); 


font-display: swap; 在 @font -face 声明 中 
} 使 用 的 font-display 
设置 该 属性 后 ,在 较 慢 的 网 络 节 流 配置 下 重新 加 载 页 面 ， 将 看 到 文本 逐步 显示 ， 而 不 会 被 济 
HA BR [ez 二 
览 需 隐 藏 。 


想 要 控制 传输 字体 的 CSS 时 ， 这 个 设置 代表 了 控制 字体 泻 染 的 最 简单 的 可 能 的 解决 方案 ， 
但 它 在 浏览 器 中 没有 得 到 广泛 支持 ,也 不 允许 你 控制 从 第 三 方 提 供 商 ( 如 Typekit 或 Google Fonts ) 
引用 字体 时 显示 字体 的 方式 。 这 时 ， 我 们 可 以 回 退 到 更 广泛 支持 的 JavaScript 解决 方案 ， 也 称 为 
字体 加 载 API。 


7.4.3 ”使 用 字体 加 载 API 


字体 加 载 AP1 是 一 个 基于 JavaScript 的 工具 ， 用 于 控制 如 何 加 载 字体 。 它 的 开放 性 为 你 提供 
了 很 大 的 自由 度 来 决定 如 何 将 字体 应 用 于 文档 , 无 论 这 些 字体 是 托管 在 你 自己 的 服务 器 上 , 还 是 
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来 自 Google Fonts 等 字体 提供 商 。 要 使 用 之 前 讨论 的 font -display CSS 属性 ,需要 控制 提供 
字体 的 CSS。 而 使 用 第 三 方 字 体 提 供 商 时 ,这 个 方案 不 可 行 。 字 体 加 载 API 提供 了 一 种 类 似 的 能 
力 ， 可 以 通过 JavaScript 而 不 是 CSS 控制 字体 的 显示 ， 且 不 必 考 虑 字体 的 来 源 。 

开始 前 ， 需 要 使 用 git 切换 到 新 的 代码 分 支 。 进 入 终端 窗口 ， 输 入 git checkout -f 
font-loader-api。 完 成 后 ， 进 入 下 一 步 。 


想 要 跳 过 ? 
如 果 你 想 跳 到 本 节 末 尾 查看 结果 , 可 以 键入 git checkout -f font-loader-api-complete。 


开始 前 ,请 在 styles.css 中 查找 使 用 自 定义 字体 的 font-family 定义 。 对 于 此 网 站 , 有 3 种 
字体 变 体 :Open Sans Light .Open Sans Regular 和 Open Sans Bold。 表 7-3 列 出 了 这 些 font-family 
定义 及 应 用 它们 的 选择 器 。 


表 7-3 ”和 做 入 式 字体 的 font-family 属性 值 及 其 相关 的 CSS 选择 器 


font-family 相关 的 CSS 选择 器 
Open Sans Light .navIitem a 
Open Sans Regular body 
Open Sans Bold .articleTitle 

.SectionHeader 


我 们 可 以 用 这 些 信 息 做 两 件 事 。 首 先是 用 系统 字体 蔡 换 所 有 这 些 字体 的 font -family 属性 。 
对 于 本 网 站 ， 你 将 为 表 7-3 中 的 关联 选择 器 使 用 以 下 属性 和 值 : 


font-family: "Helvetica", "Arial", sans-serif; 


这 将 从 页 面 删除 Open Sans 字体 系列 ， 这样 可 以 立即 看 到 内 容 ， 因 为 这 些 字体 不 是 从 Web 服 
务 器 下 载 的 。 

然后 将 这 些 选择 器 舱 套 在 一 个 类 下 ， 加 载 字 体 后 ， 该 类 将 放 在 <html> 元 素 上 。 但 是 编写 字 
体 加 载 脚本 之 前 ， 将 这 个 类 应 用 于 <html> 元 素 之 后 ， 将 编写 用 于 应 用 Open Sans 字体 的 CSS,， 
如 代码 清单 7-8 所 示 。 


代码 清单 7-8 使 用 fonts-1oagded 类 控制 字体 显示 
.fonts-loaded bodyt{ 
font-family: "Open Sans Regular"; 


} 


.fonts-loaded .navItem at{ 
font-family: "Open Sans Light"; 
} 


.fonts-loaded .articleTitle, 
.fonts-loaded .sectionHeadert{ 

font-family: "Open Sans Bold"; 
} 
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在 styles.CSS 的 末尾 放置 这 一 段 CSS， 可 以 控制 何 时 应 用 通过 字体 加 载 API 加 载 的 字体 。 因 
为 我 们 已 将 系统 字体 指定 为 初始 字体 集 ， 所 以 页 面 首 次 泻 染 时 ， 未 设置 样式 的 文本 将 立即 可 见 ， 
自 定 义 字 体 将 在 加 载 后 应 用 。 

在 文本 编辑 需 中 打开 index.html， 开 始 编写 字体 加 载 脚本 。 在 导入 styles.css ( 导入 我 们 的 字 
体 ) 的 <1ink> 标 签 之 后 ， 添 加 代码 清单 7-9。 


代码 清单 7-9 使 用 字体 加 载 API 


(function(daocument ) 1{ 检查 字体 加 载 
if (document .fonts){ API 是 否 存在 


字体 加 载 API 使 Qqocument .fonts.1oad("1lem Open Sans Light"); 
用 1oad() 方 法 document .fonts.load("lem Open Sans Regular"); 
加 载 字 体 document .fonts.load("lem Open Sans Bold"); 


ready .then document .fonts.ready.then(function(fontFaceSet)t{ 
方法 在 所 有 指 document .documentElement.className += " fonts-loaded"; 
/水 
} 


定 的 字体 都 加 }); 将 fonts-loaded 类 添 
载 后 运行 加 到 <html> 元 素 上 
elsel{ 
document .documentElement.className += " fonts-loaded"; = 
ded 


} 如 果 字 体 加 载 API 不 可 用 ， 则 直接 将 fonts-1loa 
}) (document ) ; 类 添加 到 <html> 元 素 


因为 要 管理 3 种 字体 变 体 , 所 以 需要 启动 一 个 单独 的 调用 来 加 载 每 个 字体 。 用 于 实现 此 目的 
的 字体 加 载 API 的 核心 属性 是 font 对 象 的 10ad 方法 。 与 使 用 API 通 过 URL 显 式 加 载 字 体 不 
同 , 我 们 依赖 CSS 为 文档 定义 efont-faces。 但 仅仅 定义 efont-faces 并 不 意味 着 浏览 器 会 下 
载 这 些 字体 。 浏览 絮 行 为 得 到 了 很 好 的 优化 , 现代 浏览 器 将 检查 文档 以 查看 是 否 正在 使 用 任何 已 
定义 的 efont-faces。 如 果 是 ,它们 才 会 被 下 载 , 但 由 于 你 最 初 将 所 有 font -family 值 设置 为 
使 用 系统 字体 ， 因 此 将 不 会 下 载 任何 字体 变 体 ， 除 非 通过 代码 清单 7-9 中 所 示 的 1oaa () 方 法 告 
诉 浏览 絮 这 样 做 。 

所 有 字体 都 已 加 载 后 ，fonts-loagded 类 将 添加 到 <html> 元 素 中 。 这 会 破坏 浏览 器 的 初始 
FOIT， 在 加 载 文 档 并 应 用 CSS 后 会 立即 读 取 内 容 。 然 后 ， 字体 在 可 用 时 会 应 用 到 文档 . 这 确保 
无 论 用 户 端 发 生 什 么 ， 文 本 都 将 尽快 可 见 ， 如 果 字 体 无 法 加 载 ， 文 本 就 保持 当前 这 种 方式 。 

这 种 方法 的 一 个 缺点 是 ， 它 确实 会 导致 在 页 面 上 重新 绘制 文本 元 素 ， 但 也 提升 了 可 访问 性 。 
如 果 选 择 与 自 定义 字体 类 似 的 系统 字体 ， 则 可 以 最 小 化 文档 回流 。 


1. 为 回访 用 户 进 行 优化 

我 们 的 解决 方案 非常 适合 首次 访问 的 用 户 , 但 是 当 字体 已 经 在 用 户 的 浏览 器 缓存 中 时 , 我 们 
需要 为 重复 访问 进行 优化 。 使 用 现在 的 代码 ,即使 是 在 缓存 中 有 字体 的 情况 下 , 在 后 续 的 页 面 访 
问 中 也 会 出 现 FOUT。 可 以 通过 使 用 cookie 并 稍微 修改 字体 加 载 代码 来 克服 这 个 问题 。 

下 面 修改 之 前 代码 中 的 两 个 部 分 。 在 检查 字体 加 载 API 的 行 上 , 添加 一 个 条 件 以 检查 是 否 存 
在 cookie: 
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if(document.fonts && document .cookie.indexOf ("fonts-loaded") !== -1)1{ 


此 更 改 将 添加 对 稍 后 定义 的 cookie 的 检查 。 这 个 cookie 的 名 称 是 fonts-loaded， 它 没有 
特定 的 值 。 可 以 使 用 字符 串 的 indqexof 方法 检查 它 是 否 存在 ， 如 果 没 有 找到 搜索 字符 串 ， 返 回 
值 为 -1 ( 有 点 反 直 觉 )。 这 将 确保 只 有 当 字 体 加 载 API 可 用 且 未 设置 fonts-1loaded cookie 时 ， 
字体 加 载 代 码 才 会 运行 。 

但 现在 需要 在 某 个 地 方 设置 cookie。 要 做 到 这 一 点 ,在 将 fonts-1loagded 类 添加 到 <html> 
元 素 的 行 之 后 ， 添 加 如 下 代码 : 


document .cookie = "fonts-loaded="; 


这 将 为 当前 域 添加 一 个 空 cookie, 名 为 fonts-loadegd。 设置 此 cookie 后 , 用 户 导 航 到 后 续 
页 面 时 ,字体 加 载 代码 不 会 再 次 运行 ,因此 else 条 件 会 立即 生效 ,并 将 字体 加 载 类 添加 到 <html> 
元 素 中 。 

这 将 重新 引入 FOIT, 但 由 于 字体 位 于 用 户 的 浏览 器 缓存 中 , 因此 FOIT 影响 的 风险 现在 已 经 
降低 。 只 要 确信 字体 会 被 加 载 就 没 问 题 。 既 然 字 体 在 缓存 中 ,就 可 以 保证 该 影响 不 会 阻止 用 户 查 
看 页 面 上 的 内 容 。 

JavaScript 是 检查 cookie 和 应 用 fonts-1loaded 类 的 好 方法 。 如 果真 的 想 加 快速 度 ， 可 以 使 
用 后 端 语言 (例如 PHP ) 修改 文档 ， 以 便 在 服务 器 发 送 内 容 时 ， 字 体 加 载 类 就 位 于 <html > 元 素 
上 。 删 除 在 JavaScript 中 添加 类 的 else 条 件 ， 并 通过 检查 后 端的 cookie 来 修改 输出 。 代 码 清单 
7-10 显示 了 如 何在 PHP 中 完成 这 些 操 作 。 


代码 清单 7-10 通过 PHP 有 条 件 地 添加 fonts-loaded 类 


= 


3 1 1 n 
Se i ne 人 YA 通过 isset () 了 荫 数 检查 fonts-loaded 
?>< class="fonts-loaded"> cookie 是 否 已 经 设置 
<?php } 
Se 如 果 ie 被 设置 , 则 将 
?><html> sy 来 cookie 被 仅 置 , 则 将 fonts-loaded 
<?php } ?> 2 类 添加 到 <html > 元 素 上 
元 素 


通过 使 用 后 端 语言 修改 响应 ， 可 以 在 将 <html> 元 素 发 送 到 客户 端 之 前 对 其 进行 更 改 。 也 就 
是 说 ， 因 为 JavaScript 解 决 方案 也 是 可 用 的 ， 所 以 这 两 种 方法 都 很 合理 。 使 用 哪 种 方案 完全 取决 
于 可 用 的 工具 、 你 的 技能 ， 以 及 你 可 用 的 时 间 。 


2. 考虑 禁用 JavaScript 的 用 户 

与 往常 一 样 ， 网 站 页 面 也 会 提供 给 禁用 JavaScript 的 用 户 。 你 开发 此 解决 方案 的 方式 使 得 你 
指定 的 efont-faces 将 永远 不 会 生效 ， 因 为 字体 加 载 脚本 永远 不 会 运行 ， 也 不 会 将 fonts- 
loaded 类 应 用 于 文档 。 因 此 ， 将 使 用 指定 为 第 一 个 显示 的 系统 字体 显示 内 容 。 

如 果 你 或 你 的 公司 不 在 乎 这 一 小 部 分 用 户 永 远 看 不 到 新 字体 , 那 就 别 担 心 了 。 但 你 或 公司 可 
能 会 对 此 感到 愤 溃 ， 所 以 我 们 来 回顾 一 个 涉及 我 们 的 老 朋 友 <noscript> 标 签 的 快速 解决 方案 。 
可 以 使 用 <noscript> 触 发 默认 的 浏览 器 加 载 行为 ， 方法 是 般 套 一 个 内 联 <style> 标 签 ， 该 标签 
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将 open sans 字体 系列 作为 默认 值 ， 如 代码 清单 7-11 所 示 。 
代码 清单 7-11 替代 JavaScript 字体 加 载 的 <noscript> 方 法 


为 禁用 JavaScript 的 用 户 ， 将 样式 
封装 在 noscript 标签 中 
<noscript> 忽略 fonts-loaded 类 ， 
EEY LE 直接 将 字体 分 配给 元 素 
body{ 
font-family: "Open Sans Regular", "Helvetica", "Arial", sans-serif; 


} 


.navIitem at 


font-family: "Open Sans Light", "Helvetica", "Arial", sans-serif; 
} 
.articleTitle, 
.SectionHeadert{ 

font-family: "Open Sans Bold", "Helvetica", "Arial", sans-serif; 


} 
</style> 
</Nnoscript> 


为 禁用 JavaScript 的 用 户 ,将 
样式 封装 在 noscript 标签 中 


Observer 库 ， 用 于 polyfill 字体 加 载 API 提供 的 功能 。 


7.4.4 使 用 Font Face Observer 作为 回 退 


不 幸 的 是 , 字体 加 载 API 还 没有 得 到 普遍 支持 。 现 代 浏 览 器 大 力 支 持 它 , 但 有 些 浏 览 器 ( 例 
如 下 ) 还 不 支持 它 。 如 果 你 能 让 更 多 的 浏览 器 获得 最 佳 的 字体 加 载体 验 ， 客 户 将 不 胜 感激 。 此 


时 ， 诸 如 Font Face Observer 这 样 的 polyfill 就 派 上 用 场 了 。 


Font Face Observer 是 丹麦 开发 者 Bram Stein 开发 的 一 个 字体 加 载 库 。 虽 然 它 不 是 直接 的 
polyfill， 放 到 页 面 中 也 不 能 让 你 现 有 的 字体 加 载 API 代 码 顺 利 工作 , 但 是 它 给 开发 者 提供 了 类 似 


的 字体 管理 能 力 。 


本 节 将 编写 一 个 脚本 , 该 脚本 会 在 字体 加 载 API 不 可 用 时 启动 , 并 加 载 两 个 外 部 脚本 : 一 个 
Font Face Observer 脚本 以 及 一 个 通过 Font Face Observer 加 载 字 体 的 脚本 。 开 始 之 前 ， 需 要 从 
GitHub 下 载 新 代码 。 输 入 git checkout -f fontface-observer， 下 载 完 代码 后 ， 你 就 可 


以 开始 了 ! 
1. 有 条 件 地 加 载 外 部 脚本 


使 用 git 下 载 新 的 分 支 之 后 , 你 会 注意 到 一 个 js 文件 来 , 其 中 包含 两 个 脚本 : fontfaceobserver. 
min.js ( 压缩 后 的 Font Face Observer 库 ) 和 fontloading.js( 包含 一 个 空 闭 包 ， 可 以 在 其 中 放置 
可 选 的 字体 加 载 行为 )。 由 于 你 不 想 在 所 有 浏览 器 中 引入 调用 Font Face Observer 脚本 的 开销 ， 


通过 添加 这 一 点 内 联 CSS， 即 可 让 禁用 JavaScript 的 用 户 看 到 浏览 器 的 默认 字体 加 载 行 为 。 
这 意味 着 尽管 他 们 无 法 从 字体 加 载 API 中 获 益 , 但 至 少 可 以 使 用 基本 功能 。 下 面 来 了 解 Font Face 
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所 以 只 想 在 字体 加 载 API 不 可 用 时 加 载 它 以 及 具有 回 退 加 载 行为 的 脚本 。 为 此 ， 请 在 检查 
document .fonts 对 象 的 初始 if 条 件 和 fonts-1loaded cookie 以 及 随后 的 else 条 件 之 间 , 添 
加 代码 清单 7-12。 


代码 清单 7-12 ”有 条 件 地 加 载 Font Face Observer 和 字体 加 载 脚本 


检查 字体 加 载 AP|I 是 否 不 可 用 ， 以 及 
是 否 未 设置 fonts-loaded cookie 
else if(!dqocument .fonts && Qocument .cookie.indexof("fonts-loaded") === -1){ <- 一 
将 src 属性 Var fontFaceObserverScript = document.createElement ("script"), 一 
设置 为 两 个 fontLoadingScript = document.createElement ("script"); 
脚本 的 位 置 
fontFaceObserverScript.src = "js/fontfaceobserver.min.js"; 创建 新 的 <script> 
fontLoadingScript.src = "js/fontloading.js"; 标签 , 用 于 加 载 Font 
fontFaceObserverScript.defer = "defer"; Face Observer 和 字 
gp fontLoadingScript.defer = "defer"; 体 加 载 脚本 
设置 defer 
属性 ， 以 延 document .head.appendchild(fontFaceObserVerScript) ， 
迟 脚 本 解析 document .head.appendChild(fontLoadingScript); 
} 将 <script> 元 素 
添加 到 <head> 标 
签 的 末尾 


上 述 代码 很 简单 。 如 果 字 体 加 载 API 不 可 用 并 且 fonts-loadeqd cookie 尚未 设置 ， 则 可 以 
为 Font Face Observer 和 字体 加 载 脚本 创建 新 的 <script> 元 素 , 并 将 它们 的 src 属性 设置 为 各 自 
的 位 置 。 为 了 确保 它们 不 会 阻塞 页 面 泻 染 ， 你 还 为 两 者 设置 了 defer 属性 。 要 让 所 有 内 容 生 效 ， 
请 通过 将 这 些 脚 本 附加 到 <heaq> 元 素 的 末尾 ， 指 示 浏 览 器 加 载 它们 。 


2. 编写 字体 加 载 行为 
在 文本 编辑 咒 中 打开 js/fontloading.js， 你 会 注意 到 这 个 文件 的 内 容 是 一 个 空 的 JavaScript 闭 
包 。 从 第 2 行 开始 ， 将 代码 清单 7-13 的 内 容 添加 到 文件 中 。 


代码 清单 7-13 ”使 用 Font Face Observer 控制 字体 加 载 


等 待 DOM 
; 就 绪 
document .onreadystatechange = function()1{ 


var openSansLight = new FontFaceobserver("Open Sans Light"), 
openSansRegular = new FontFaceObserver("Open Sans Regular"), 


加 


等 待 所 有 字 openSansBold = new FontFaceObserver ("Open Sans Bold"); 
体 加 载 的 指定 要 在 此 文档 中 
promise Promise.all([openSansLight.1lo0ad(), 使 用 的 字体 源 
openSansRegular. load(), 
openSansBold. load()]) .then(function(){ 
document .documentElement .className += " fonts-loaded"; 
document .cookie = "fonts-loaded="; 


人 将 fonts-loaded 类 


} fonts-loaded cookie 是 为 后 续 页 添 加 2 te 条 
面 加 载 设置 的 ， 因 为 字体 将 被 缓存 中 ， 泻 染 自 定义 字体 
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Font Face Observer 的 语法 与 字体 加 载 API 大 同 小 异 。 为 要 加 载 的 每 个 字体 变 体 定义 
FontFaceObserver 对 象 , 然后 通过 JavaScript promise 等 待 所 有 字体 都 加 载 完 毕 。 加 载 字 体 后 ， 
将 fonts-loaded 类 应 用 于 <html> 元 素 ， 并 设置 fonts-loaded cookie。 这 样 你 就 可 以 重用 控 
制 〈 在 字体 加 载 API 中 使 用 的 ) 字体 显示 的 机 制 。 

这 项 工作 的 结果 是 一 种 有 效 且 广泛 兼容 的 方法 ， 它 在 适当 的 时 候 使 用 原生 API, 但 随后 又 回 
退 到 有 能 力 的 polyfill。 有 了 这 些 代 码 ， 客 户 当然 会 对 字体 泻 染 很 满意 。 “客户 为 本 ”的 道理 ， 你 
懂 的 。 


7.5 小结 


本 章 我 们 学 习 了 以 下 字体 优化 和 传输 技术 。 

口 通过 只 选择 所 需 的 字体 变 体 ， 可 以 减 小 页 面 大 小 。 虽 然 似乎 是 常识 ,但 审核 字体 的 选择 
是 值得 的 。 这 样 可 以 提高 网 站 的 加 载 速 度 。 

口 构建 一 个 最 优 的 efont-face 级 联 可 以 帮助 你 提高 网 站 的 性 能 ， 方 法 是 优先 选择 本 地 安 
装 的 字体 ， 然 后 回 退 到 一 组 最 优 格 式 ， 再 到 最 差 的 格式 。 

口 通过 在 服务 器 上 压缩 TTF 和 EOT 格式 ， 可 以 在 一 定 程度 上 弥补 它们 的 缺点 。 

口 通过 将 字体 文件 限制 为 网 站 内 容 语 言 所 需 的 字符 ， 生 成 字体 子 集 可 以 减 小 字体 文件 的 


大 小 Le 
口 在 现代 浏览 器 中 使 用 unicode-range 属性 有 助 于 你 根据 网 站 内 容 的 语言 仅 选 择 必要 的 
字体 子 集 。 


口 可 以 使 用 CSS 中 的 font-daisplay 属性 控制 字体 的 显示 方式 。 当 font-display 不 可 
用 ， 或 者 你 无 法 控制 提供 字体 的 CSS( 例如 涉及 Google Fonts 或 者 Typekit 等 第 三 方 字体 
提供 商 ) 时 ， 可 以 使 用 字体 加 载 API 控 制 字体 的 显示 方式 。 

口 如 果 字 体 加 载 API 不 可 用 ， 仍 然 可 以 通过 使 用 第 三 方 Font Face Observer 库 控 制 加 载 和 显 
示 字 体 的 方式 。 
现在 你 已 经 熟悉 了 这 些 技 术 ， 可 以 继续 开发 你 的 Web 项 目 ， 并 应 用 它们 为 客户 人 带 来 收益 

( 当然 , 需要 团队 的 支持 )。 下 一 章 将 学 习 如 何 利 用 各 种 技术 优化 应 用 程序 的 JavaScript， 比 如 控 

制 <script> 元 素 的 加 载 行为 、 使 用 高 性 能 的 原生 JavaScript API、 使 用 更 精简 的 jQuery 替代 方 


案 等 。 


保持 JavaScript 的 简洁 
与 快速 


本 章 内 容 

口 影响 <script> 标 签 的 加 载 行为 

口 将 jQuery 替换 为 更 小 、 更 快 、API 羔 容 的 替代 方案 
口 使 用 原生 JavaScript 方 法 替换 jQuery 功能 

口 使 用 reauestaAnimationFrame 方 法 实现 动画 


JavaScript 世界 充满 了 各 种 库 和 框架 ， 为 我 们 开发 网 站 提供 了 很 多 选项 。 但 在 兴奋 地 学 习 和 
使 用 它们 的 过 程 中 ， 我 们 却 常 常 忘记 ， 通 往 快 速 网 站 的 最 可 靠 的 途径 是 拥抱 极 简 主义 。 

这 并 不 是 说 这 些 工 具 在 Web 开发 领域 没有 一 席 之 地 。 它 们 非常 有 用 ， 可 以 节省 开发 人 员 编 
写 代码 的 时 间 。 人 然而， 本章 由 在 为 了 用 户 而 在 网 站 的 JavaScript 中 推行 极 简 主义 。 

本 章 ， 我 们 将 深入 了 解 如 何 改 进 网 站 上 脚本 加 载 的 性 能 ， 还 将 学 习 与 jQuery 兼容 的 库 。 这 
些 库 可 以 实现 jQuery 的 大 部 分 功能 ， 但 文件 较 小 且 性 能 更 好 。 我 们 将 进一步 研究 如 何 用 浏览 器 
内 API 来 替换 jQuery， 这 些 API 提供 了 jQuery 的 大 部 分 功能 ， 但 没有 额外 开销 。 最 后 将 学 习 使 
用 requestAnimationFrame 方法 编写 高 性 能 动画 。 下 面 就 开始 吧 ! 


8.1 影响 脚本 加 载 行为 


<script> 标 签 与 加 载 CSS 时 的 <1ink> 标 签 一 样 , 可 能 会 阻碍 页 面 的 泻 染 , 这 取决 于 标签 在 
文档 中 的 位 置 。 还 可 以 通过 元 素 的 async 属性 修改 脚本 加 载 行为 。 下 面 看 看 脚本 加 载 的 这 些 方 
面 ， 并 了 解 它 们 如 何 影 响 性 能 。 我 们 重新 访问 科 伊 尔 家 电 维修 网 站 。 使 用 以 下 命令 ， 从 GitHub 
下 载 并 运行 该 网 站 : 

git clone https://github.com/webopt/ch8-javascript .git 

cd ch8-javascript 


npm install 
node http.js 


我 们 首先 试验 <script> 标 签 的 位 置 。 
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8.1.1 合理 放置 <script> 元 素 
你 可 能 还 记得 ， 在 第 3 章 和 第 4 章 加 载 CSS 时 ，<1ink> 标 签 的 位 置 (其 至 是 其 存在 ) 会 阻 
塞 页 面 的 演 染 。<script> 标 签 也 会 导致 这 种 行为 , 但 是 因为 脚本 不 像 CSS 导入 这 样 会 影响 页 面 
的 外 观 ， 所 以 你 在 放置 <script> 标 签 时 有 更 大 的 灵活 性 。 图 8-1 显示 了 这 种 行为 。 
浏览 器 


bd Web site! 
自古 价 份 |[Q http/Wwwwebsite.com 


HTML 


<!doctype html> 
<html> 

<head> 
<title>Some Website</title> 
<script src=”js/jquery.min.js”></script> 
</head> 
<body> 


浏览 器 首先 发 现 
顶部 脚本 链接 
<script src=”js/behaviors.min.js”></script> 
</body> 

</html> 


浏览 器 最 后 发 现 
底部 脚本 链接 
图 8-1 浏览 器 自 上 而 下 读 取 HTML 文档 。 找 到 外 部 资源 链接 时 ( 例如 本 例 中 的 脚本 )， 
浏览 器 将 停止 读 取 HIML 并 开始 解析 。 解 析 过 程 会 阻塞 渔 染 


这 种 行为 可 能 会 影响 浏览 器 首次 绘制 页 面 的 时 间 。 例 如 ， 如 果 浏 览 器 在 <heada> 中 检测 到 
<script> 标 签 ， 它 会 暂停 下 载 和 解析 脚本 的 操作 。 此 时 ， 浏 览 器 会 将 页 面 泻 染 放 在 次 要 位 置 。 
在 客户 网 站 的 代码 中 ，jquery.min.js 和 behaviors.js 的 <script> 标 签 位 于 文档 的 <head> 标 签 中 ， 
会 导致 演 染 阻塞。 可 以 通过 检查 文档 的 首次 绘制 时 间 来 测量 此 效果 。 第 4 章 描 述 过 测量 方法 ， 下 
面 回顾 一 下 这 个 过 程 。 

要 测量 首次 绘制 客户 端 网 站 所 需 的 时 间 , 请 选择 Regular 3G 节 流 配置 , 以 模拟 在 较 慢 的 连接 
上 加 载 页 面 。 然 后 转 到 Performance 选项 卡 并 打开 http://localhost:8080。 加 载 页面 并 填充 时 间 线 时 ， 
转 到 Performance 窗 格 的 底部 ， 并 切换 到 Event Log 选项 卡 。 过 滤 除 绘制 事件 之 外 的 所 有 事件 类 
型 。 列 表 中 出 现 的 第 一 个 事件 就 是 首次 绘制 的 时 间 ， 效 果 应 该 如 图 8-2 所 示 。 


All 轩 Loading (© Scripting Rendering WM Painting 


Start Time a | Self Time Total Time Activity 
四 832.9 ms 0.4ms 0.4ms Paint 
首次 绘制 > 833.7 ms 0.2ms 0.2ms Composite Layers 
的 时 间 982.8 ms 0.4ms 0.4ms Paint 
图 8-2 ”在 文档 的 <head> 中 使 用 <script> 标 签 时 ， 科 伊 尔 家 电 维修 网 站 在 Chrome 中 
首次 绘制 的 时 间 
<script> 标 签 位 于 <head> 中 时 ,首次 绘制 客户 网 站 的 平均 时 间 约 为 830 毫秒 。 似 乎 经 历 了 
很 长 一 段 时 间 ， 页 面 才 开 始 绘制 。 可 以 试 着 将 这 些 脚本 移动 到 index.html 的 末尾 ，</ibody> 闭 合 
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标签 之 前 ， 并 查看 图 表 是 如 何 变 化 的 ， 如 图 8-3 所 示 。 


Al| 回 国 Loading Scripting 人 Rendering 国 Painting 
Start Time a | Self Time Total Time Activity 
497.4ms 0.9ms 0.9ms Paint 
和 本 499.8 ms 0.9 ms 0.9 ms Composite Layers 
图 8-3 在 文档 末尾 使 用 <script> 标 签 时 ， 科 伊 尔 家 电 维修 网 站 在 Chrome 中 首次 
绘制 的 时 间 


在 我 的 测试 中 ， 首 次 绘制 的 时 间 大 约 能 够 达到 500 毫秒 ， 约 等 于 减少 了 40%， 是 的 ， 至 少 在 
这 个 例子 中 是 这 样 的 。 与 大 多 数 优化 一 样 ， 你 的 测量 结果 会 有 所 不 同 。 脚 本 的 大 小 和 数量 以 及 
HTML 文档 的 长 度 都 会 产生 影响 。 

好 消息 是 , 这 种 方法 在 几乎 所 有 浏览 器 中 都 能 起 作用 ,而且 是 一 个 非常 简单 的 修复 方法 。 还 
可 以 通过 <script> 标 签 以 其 他 方式 影响 脚本 的 加 载 ， 例 如 async 属性 。 


8.1.2 ”使 用 异步 脚本 加 载 


现代 浏览 器 支持 一 种 改变 外 部 脚本 加 载 行为 的 方法 ， 这 种 改变 是 通过 修改 <script> 标 签 的 
async 属性 实现 的 。async (asynchronous 的 缩写 ) 告诉 浏览 需 加 载 脚本 后 立即 执行 该 脚本 ， 而 
不 是 按 顺 序 加 载 每 个 脚本 并 等 竺 它们 依次 执行 。 图 8-4 比较 了 这 两 种 行为 。 


不 使 用 async 


下 载 脚本 加 脚本 下 载 完 成 浏览 人 执行 脚本 


ps 


使 用 async 
下 载 脚本 一 脚本 下 载 完 成 一 执行 脚本 
时 间 


图 8-4 ”使 用 与 不 使 用 async 属性 加 载 脚本 的 比较 。 主 要 区 别 在 于 : 使 用 async 加 载 
的 脚本 不 会 等 待 其 他 脚本 加 载 完 成 后 再 执行 

带 有 async 属性 的 <script> 标 签 的 行为 与 没有 async 属性 的 标签 不 同 ， 因 为 它们 会 在 下 
载 时 立即 执行 ， 且 不 会 在 下 载 时 阻塞 泻 染 。 


8.1.3 使 用 async 


要 使 用 async， 需 将 其 添加 到 要 异步 执行 的 <script> 标 签 。 在 这 个 例子 中 ， 这 种 做 法 将 使 
得 客户 网 站 的 首次 绘制 时 间 减 少 约 40%。 我 们 在 jquery.min.js 和 behaviors.js 脚本 上 试 一 试 , 如 以 
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下 代码 中 的 粗 体 所 示 : 


<script src="js/jquery.min.js" async></script> 
<script src="js/behaviors.js" async></script> 


看 起 来 很 容易 ， 对 吧 ? 你 可 以 重新 加 载 页 面 ,并 检查 是 否 生效 了 。 答案 是 否定 的 。 重 新 加 载 
后 ， 你 将 看 到 一 个 控制 台 错误 ， 如 图 8-5 所 示 。 


@ PUncaught ReferenceError: $ is not defined behaviors.ijs:1 


图 8-5 ” async 属性 会 导致 behaviors.js 报错 ， 因 为 它 在 依赖 项 jquery.min.js 
可 用 之 前 执行 


这 太 糟 糕 了 ， 不 是 吧 ? 如 果 async 中 断 了 一 些 东西 ， 那 么 它 又 有 什么 意义 呢 ? 使 用 async 
能 够 带 来 一 些 好 处 ， 但 是 当 脚 本 相互 依赖 时 ， 事 情 就 会 变 得 棘手 。 当 你 同时 使 用 async 与 相互 
依赖 的 脚本 时 ， 它 们 会 进入 所 谓 的 竞争 条 件 ， 其 中 两 个 脚本 可 能 会 不 按 顺序 运行 。 在 本 例 中 ， 
jquery.min.js 和 behaviors.js 之 间 发 生 竞争 条 件 。 因 为 behaviors.js 比 jquery.min.js 小 得 多 ， 所 以 它 
总 是 会 赢得 “比赛 ”并 先 运 行 。 但 由 于 behaviors.js 依赖 于 jquery.min.js，behaviors.js 将 始终 由 于 
jquery 对 象 不 可 用 而 失败 。 这 是 因为 jquery.min.js 没有 在 behaviors.js 之 前 加 载 和 执行 。 图 8-6 说 
明了 这 种 竞争 条 件 。 


开始 下 载 执行 


jquery.min.js 
behaviorsjs 8 册 于 依赖 缺失 而 执行 失败 
开始 执行 
下 载 
—=> 
时 间 
图 8-6 jquery.min.js 和 behaviors.js 之 间 的 竞争 条 件 总 是 会 导致 失败 ， 因 为 behaviors.js 
在 其 依赖 项 可 用 之 前 加 载 并 执行 
这 种 情况 并 非 总 会 发 生 。 例 如 ,如 果 没 有 任何 脚本 具有 依赖 项 , 则 可 以 自由 使 用 async。 但 
是 当 脚 本 具有 依赖 性 时 ， 事 情 就 会 变 得 环 手 。 
解决 此 问题 的 一 种 方法 是 将 依赖 脚本 组 合 起 来 , 以便 将 这 些 依赖 打包 为 单个 资源 。 在 本 例 中 ， 
可 以 按 顺 序 组 合 jquery.min.js 和 behaviors,js。 在 命令 行 中 运行 此 命令 ,将 两 个 脚本 合并 为 scripts,js: 


cat jquery.min.js behaviors.js > scripts.js 


由 于 cat 仅 在 类 UNIX 系统 上 可 用 ，Windows 用 户 可 以 使 用 以 下 方法 : 


type jquery.min.js behaviors.js > scripts.js 
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此 命令 将 很 快 完成 。 完 成 后 ， 要 在 index.html 中 删除 上 述 两 个 <script> 标 签 ， 并 用 一 个 指 
向 scripts.js 的 <script> 标 签 蔡 换 


<script src="js/scripts.js" async></script> 


重新 加 载 后 ， 页 面 再 次 运行 ， 但 你 可 能 会 思考 :“ 这 有 什么 好 处 ? ”好 处 相当 明显 。 图 8-7 
显示 了 使 用 async 之 后 ， 首 次 绘制 时 间 的 进一步 改进 。 


| All 二 Loading scripting 国 Rendering 园 Painting 
Start Time 下 Self Time Total Time Activity 

2 301.8ms 0.0ms 0.0ms 赂 Paint 

首次 绘制 452.4ms 1.3 ms 1.3ms 国 Paint 

的 时 间 454.3 ms 0.5ms 0.5 ms 凰 Composite Layers 


图 8-7 脚本 打包 后 ,使 用 async 属性 加 载 脚本 的 科 伊 尔 家 电 维修 网 站 在 Chrome 中 
的 首次 绘制 时 间 


在 我 的 测试 中 , async 在 脚本 打包 的 情况 下 首次 绘制 的 平均 时 间 约 为 300 毫秒 , 这 比 在 页 面 
底部 放置 不 带 async 的 独立 脚本 大 约 减 少 了 200 毫秒 。 使 用 async 的 好 处 很 明显 ， 而 且 不 止 于 
此 。 如 果 没 有 async，DOM 需要 在 页 面 开 始 加 载 大 约 1.4 秒 后 才 可 用 ; 而 使 用 async 之 后 ， 这 
个 数字 降 到 了 300 毫秒 。 

如 果 你 可 以 管理 依赖 项 ， 那 么 使 用 async 是 值得 的 。 它 也 得 到 了 高 度 支 持 ， 在 所 有 主要 浏 
览 器 中 都 可 用 ,甚至 在 正 10 及 以 上 版 本 中 也 可 用 。 如 果 不 支 持 async, 可 以 将 <script> 标 签 保 
留 在 页 脚 ， 它 们 将 以 正常 方式 加 载 到 较 旧 的 浏览 器 中 。 只 有 一 种 例外 情况 ， 我 们 很 快 会 讨论 。 


8.1.4 在 多 脚本 加 载 中 可 靠 地 使 用 async 


你 可 能 会 对 打包 脚本 产生 疑问 ， 但 对 于 HTTP/1 服务 器 端 和 客户 端 来 说 ， 这 是 一 种 很 好 的 优 
化 实践 ， 因 为 它 可 以 帮助 缓解 该 协议 版 本 固有 的 队 头 阻塞 问题 。 

然而 ，HTTP/2 连接 受益 于 以 更 细 粒 度 的 方式 〈 而 不 是 打包 ) 提供 资源 。 更 细 粒 度 的 资源 可 
以 使 缓存 更 有 效 。HTTP/2 能 够 提供 比 HTTP/1 更 多 的 并 发 请 求 ， 从 而 解决 队 头 阻塞 的 问题 。 第 
11 章 会 探讨 这 一 点 。 而 本 节 的 重点 是 展示 如 何在 维护 依赖 关系 的 同时 异步 加 载 脚 本 。 为 此 , 将 使 
用 名 为 Alameda 的 模块 加 载 程序 。 

Alameda 是 由 Mozilla 开发 者 James Burke 编写 的 异步 模块 定义 ( Asynchronous Module 
Definition，AMD ) 模块 加 载 器 。 尽 管 它 能 够 支持 具有 许多 依赖 项 的 复杂 项 目 ， 但 它 本 身 是 一 个 
小 脚本 ， 经 过 精简 和 压缩 后 ， 其 大 小 仅 为 4.6 KB 左右 。 这 并 没有 增加 太 多 开销 ， 它 能 够 确保 脚 
本 异步 加 载 ， 同 时 遵循 其 依赖 关系 。 


什么 是 AMD 模块 ? 
AMD 代表 异步 模块 定义 。 此 规范 将 脚本 定义 为 模块 ， 并 提供 了 一 种 机 制 ， 用 于 根据 彼此 
之 间 的 依赖 关系 异步 加 载 脚本 。 
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使 用 Alameda 完成 这 项 任务 很 简单 ， 而 且 因为 它 属 于 你 在 本 节 开 头 下 载 的 GitHub 仓库 的 一 
部 分 ， 所 以 可 以 直接 使 用 。 首 先 要 做 的 是 ， 从 index.html 中 删除 所 有 <script> 标 签 ， 并 在 结束 
标签 之 前 添加 以 下 <script>: 
<script src="js/alameda.min.js" 
此 处 可 以 看 到 以 下 三 个 属性 。 
D src 加 载 Alameda 脚本 。 
D aata-main 引入 behaviors.js 脚本 。Alameda 在 引用 脚本 时 不 需要 .js 后 级 ， 这 是 AMD 模 
块 的 语法 。 
口 async 异步 加 载 Alameda， 防 止 阻塞 页 面 演 染 。 
仅仅 把 这 个 脚本 放 在 页 面 上 不 足以 让 其 正常 工作 。 还 需要 打开 behaviors.js， 添 加 配置 代码 ， 
并 将 jQuery 行为 定义 为 AMD 模块 。 


data-main="js/behaviors" async></script> 


代码 清单 8-1 配置 Alameda 并 将 behaviors.js 定义 为 AMD 模块 


开始 Alameda 
Coe 配置 | 
定义 requirejs.config({ jQuery 脚本 相对 
依赖 paths:{ 于 behaviors.js 
jauery: "jquery .min" 的 位 置 
} 
} 和 
Alameda a 模块 
配置 结束 require(["jquery"], function($){ 和 
/* 简短 起 见 ， 此 处 省 略 behaviors.js 的 内 容 */ < 一 
eS 在 模块 定义 中 包含 


behaviors.is 的 内 容 
我 们 在 此 要 做 两 件 事 : 定义 一 个 配置 ， 告 诉 Alameda jquery.min.js 所 在 的 位 置 ， 然 后 将 
behaviors.js 脚本 包装 在 一 个 模块 定义 中 ， 该 模块 定义 在 第 一 个 参数 中 将 jQuery 指定 为 依赖 项 。 
然后 ， 第 二 个 参数 中 的 依赖 代码 在 满足 其 依赖 关系 时 运行 。 
重新 加 载 包含 这 些 更 改 的 页 面 并 检查 页 面 的 首次 绘制 时 间 时 , 你 会 注意 到 , 首次 绘制 时 间 仍 
然 维 持 在 与 打包 脚本 和 使 用 async 时 相同 的 水 平 。 不 过 最 大 的 区 别 在 于 ， 你 在 保持 脚本 独立 的 
同时 ， 遵 循 了 behaviors.js 对 jquery.min.js 的 依赖 性 。 


Alameda 只 支持 现代 浏览 器 ! 

Alameda 是 RequireJS 的 升级 版 ， 它 需要 现代 浏览 器 特有 的 功能 才能 工作 ， 比 如 JavaScript 
promise。 如 果 你 需要 更 广泛 的 浏览 器 支持 ， 可 以 使 用 RequireJS 代替 Alameda。RequireJS 和 
Alameda 共享 了 完全 兼容 的 API， 因 此 你 可 以 将 其 中 一 个 替换 掉 。 另 外 ， 当 最 小 化 并 局 动 gzip 
时 ，RequireJS 只 比 Alameda 大 将 近 2KB。 


我 们 已 经 知道 如 何 优化 脚本 加 载 ， 下 面 看 看 jQuery 的 替代 品 。 它 提供 了 旭 
销 更 小 ， 执 行 速 度 更 快 。 


容 的 API, 并且 开 
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8.2 ”使 用 更 简洁 的 兼容 jQuery 的 替代 方案 


多 年 前 , jQuery 突然 出 现 ， 当 时 , 要 完成 一 些 简单 的 任务 ， 比 如 选择 DOM 元 素 和 绑 定 事件 ， 
需要 复杂 的 代码 来 检查 不 同 浏览 器 上 可 用 的 方法 。 很 少 有 方法 是 统一 的 ， 而 jQuery 利用 了 这 一 
点 ， 提 供 了 一 致 的 API， 使 得 用 户 可 以 不 在 意 浏 览 器 类 型 。 

可 以 理解 ,jQuery 由 于 其 实用 性 和 方便 的 语法 而 持续 存在 。 但 是 基于 很 多 理由 , 你 可 以 考虑 
使 用 与 jQuery 共享 API 部 分 的 替代 方案 ， 同 时 可 以 享受 更 小 的 占用 空间 和 更 高 的 性 能 。 

本 节 将 介绍 jQuery 的 替代 方案 。 我 们 将 比较 它们 的 大 小 和 性 能 ， 并 在 科 伊 尔 家 电 维修 网 站 
上 选择 其 中 一 个 选项 。 此 外 还 会 介绍 这 些 蔡 代 方案 的 注意 事项 。 


8.2.1 比较 替代 方案 


许多 JavaScript 库 都 与 jQuery 兼容 。 在 这 些 备 选 方案 中 ,与 jQuery 兼容 并 不 意味 着 提供 了 
每 个 jQuery 方法， 而 是 意味 着 jQuery 中 的 许多 方法 在 备 选 方案 中 可 用 ， 并 且 语 法 相同 。 其 目的 
是 用 文件 大 小 的 度量 来 换取 更 少 的 功能 。 其 中 一 些 库 还 提供 了 更 好 的 性 能 。 


8.2.2 ”探索 竞 品 


我 们 将 比较 三 个 兼容 jQuery 的 库 : Zepto、Shoestring 和 Sprint， 它 们 各 自 的 详细 信息 如 下 。 

口 Zepto 被 描述 为 一 个 轻 量 级 的 兼容 jQuery 的 JavaScript 库 。 在 所 有 jQuery 备 选 方案 中 , 它 

是 最 富 开 箱 即 用 特性 的 ， 并且 可 以 扩展 以 完成 更 多 工作 。 它 是 这 个 领域 最 受 欢 迎 的 选择 。 

口 Shoestring 是 由 Filament Group 编写 的 。 它 提供 的 功能 比 Zepto 少 ， 但 提供 了 jQuery 提供 

的 大 多 数 核心 DOM 遍历 和 操作 方法 ， 对 $ .ajax 方法 的 支持 有 限 。 

口 Sprint 是 最 轻 量 、 功 能 最 简单 的 jQuery 替代 品 , 但 其 性 能 很 高 。 虽然 它 提供 的 功能 并 没有 
那么 多 ,但 是 当 你 想 从 很 少 的 功能 开始 时 ， 它 很 适合 ， 并 且 在 需要 时 可 以 添加 一 个 更 为 
强大 的 库 。 

比较 这 些 库 时 ， 要 考虑 每 个 库 的 大 小 和 等 效 方法 的 性 能 。 


8.2.3 比较 大 小 


使 用 这 些 蔡 代 方 案 的 最 大 目的 在 于 减 小 文件 大 小 。 如 前 所 述 ， 减 少 网 站 加 载 时 间 的 最 好 方 
法 就 是 限制 发 送 给 用 户 的 数据 量 。 如 果 在 Web 项 目 中 使 用 jQuery， 那么 这 些 库 是 开始 精简 的 最 
佳 选择 。 图 8-8 将 这 些 库 的 文件 大 小 与 jQuery 进行 了 比较 ， 所 有 文件 大 小 都 经 过 最 小 化 和 服务 
顺 压 缩 。 
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jQuery 及 其 兼容 库 的 文件 大 小 比较 
(文件 经 过 最 小 化 和 服务 器 压缩 ) 


30KB 


25 KB 


20 KB 


15 KB 


文件 大 小 


10 KB 
5 KB 


oRB jQuery Zepto Shoestring Sprint 


图 8-8 jQuery 及 其 替代 方案 的 文件 大 小 比较 


jQuery 不 是 很 大 ， 而 其 替代 品 更 小 得 多 。 如 果 可 以 将 依赖 jQuery 的 网 站 的 负载 至 少 降低 20 
KB， 何 乐 而 不 为 呢 ? 你 当然 会 这 么 做 。 不 过 好 处 还 不 止 于 此 。 人 性 能 提升 也 会 产生 效益 。 


8.2.4 比较 性 能 


本 节 将 比较 常见 jQuery 任务 的 执行 时 间 : 按 类 名 选择 元 素 , 使 用 addclass 和 removeClass 
方法 切换 元 素 上 的 类 ， 以 及 通过 attr 和 removeaAttr 方法 切换 属性 。 

为 了 衡量 这 些 情况 下 的 性 能 ， 我 选择 了 名 为 Benchmark.js 的 JavaScript 库 。 利 用 这 个 库 可 以 
查看 JavaScript 片段 每 秒 能 够 执行 的 次 数 。 

我 不 会 深入 探讨 Benchmark.js 在 幕后 是 如 何 工作 的 。 我 只 想 针 对 一 些 常 用 方法 展示 所 选择 的 
替代 方法 与 jQuery 相 比 性 能 如 何 。 

在 选择 测试 中 ， 可 以 按 类 名 在 页 面 上 选择 div .myDiv 的 元 素 。 图 8-9 显示 了 如 何 处 理 这 个 
简单 的 任务 。 


根据 类 名 选择 元 素 的 性 能 比较 
(数值 越 高 越 好 ) 
2 000 000 


1 500 000 


1 000 000 


执行 / 秒 


500 000 


0 jQuery Zepto Shoestring Sprint 
图 8-9 jQuery 及 其 替代 方案 在 根据 类 名 选择 元 素 时 的 性 能 比较 
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Sprint 无 颖 是 赢家 ， 而 jQuery 的 表现 超过 了 Zepto 和 Shoestring。 图 8-10 显示 了 当 你 在 一 个 
元 素 上 切换 类 时 的 测试 结果 。 


切换 元 素 类 名 的 性 能 比较 
(数值 越 高 越 好 ) 


150 000 『 


120 000 


90 000 


执行 / 秒 


60 000 


30 000 


jQuery Zepto Shoestring Sprint 
图 8-10 jQuery 及 其 替代 方案 切换 元 素 类 名 时 的 性 能 比较 


此 时 情况 更 微妙 。Sprint 仍然 明显 是 赢家 。jQuery 排名 第 三 , 输 给 了 Shoestring, 但 仍然 击败 
了 Zepto。 切 换 属 性 时 ， 可 以 在 图 8-11 中 看 到 运行 的 情况 。 


切换 属性 的 性 能 比较 
(数值 越 高 越 好 ) 
400 000 5 
350 000 
300 000 
250 000 
全 
志 200 000 
Ea 


150 000 
100 000 
50 000 


jQuery Zepto Shoestring Sprint 
图 8-11 jQuery 及 其 蔡 代 方案 切换 属性 时 的 性 能 比较 


Sprint 再 次 占据 了 主导 地 位 。Zepto 输 了 ， 第 三 名 是 jQuery， 第 二 名 是 Shoestring。 应 该 注意 
的 是 ， 这 是 对 方法 的 任意 抽样 。 每 种 方法 都 会 有 不 同 的 比较 ， 但 有 些 趋势 确实 存在 。Sprint 似乎 
是 速度 最 快 的 ， 但 值得 注意 的 是 ，Sprint 的 API 与 jQuery 的 API 并 不 完全 兼容 。Zepto 覆盖 了 大 
多 数 jQuery 方 法 ， 并 且 有 插件 来 进一步 扩展 其 功能 。 尽 管 Sprint 在 性 能 方面 看 起 来 很 有 吸引 力 ， 
但 它 并 不 是 改造 以 jQuery 为 中 心 的 web 项 目的 最 简单 的 替代 方案 。 
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我 们 已 经 体会 到 了 这 些 库 在 大 小 和 功能 上 的 区 别 ， 下 面 更 进一步 ， 使 用 这 些 蔡 代 方 案 之 一 ， 
对 科 伊 尔 家 电 维 修 网 站 进行 改造 。 


8.2.5 ”实现 替代 方案 


对 于 轻 度 使 用 jQuery 的 网 站 来 说 ， 使 用 jQuery 替代 品 很 简单 :只 需 将 蔡 代 品 放 到 jQuery 的 
位 置 即 可 。 本 节 将 做 这 件 事 。 在 开始 之 前 ， 可 能 需要 撤销 本 章 前 面 所 做 的 所 有 更 改 。 为 此 ,请 键 


人 git reset --hard。 


8.2.6 使 用 Zepto 


科 伊 尔 的 另 一 个 选择 是 Zepto。 虽 然 Zepto 不 是 性 能 最 高 的 备 选 库 ， 但 它 支 持 你 需要 的 所 有 
功能 ， 而 且 比 jQuery 的 13 还 小 。 你 可 以 轻松 地 将 网 站 的 负载 从 122 KB 降 到 102 KB。 

在 本 例 中 使 用 Zepto 的 男 一 个 原因 是 ， 它 需要 的 工作 量 最 少 ， 因 为 它 与 jQuery 最 兼容 ， 而 
Shoestring 和 Sprint 等 库 需 要 重 构 才能 工作 。 在 时 间 非 常 关键 的 环境 中 ( 什么 时 候 不 是 呢 ?” ), 你 
通常 可 以 使 用 Zepto， 而 且 所 需 的 工作 比 其 他 选择 都 要 少 。 

仓库 的 js 文件 夹 已 经 包含 了 Zepto 的 副本 。 要 更 改 jQuery 并 将 其 替换 为 Zepto， 只 需 将 src 
性 从 js/jquery.min.js 更 新 为 : 


js/zZepto.min.js 


重新 加 载 页 面 时 ,你 会 注意 到 控制 台 没 有 错误 , 页 面 上 的 所 有 功能 都 应 该 存在 ,包括 用 于 预 
约 安排 的 模 态 框 表 单 提交 ， 它 由 jQuery AJAX 驱动 。 


| 


8.2.7 理解 使 用 Shoestring 或 Sprint 的 注意 事项 


“就 这 样 ? 没 别 的 了 ? ”这 很 可 能 是 你 现在 的 想法 。 在 这 种 情况 下 ， 是 的 ， 这 就 差不多 了 。 
记 住 ， 我 们 选择 Zepto 是 因为 它 是 所 有 可 选 方案 中 与 jQuery 最 兼容 的 。 

如 果 顺 便 使 用 了 Shoestring 或 Sprint， 将 需要 对 它们 进行 重 构 。 科 伊 尔 家 电 维 修 网 站 使 用 
jQuery 的 $.ajax 方法 回 网 站 所 有 者 发 送 预 约 计划 的 电子 邮件 ,而 Shoestring 对 $ .ajax 方法 的 实 
现 与 jQuery 不 完全 兼容 。Sprint 则 因为 没有 $.ajax 实现 ， 所 以 无 法 满足 原 有 功能 。 

不 仅仅 是 $ .ajax 方法 有 问题 。jQuery 替代 方案 并 不 支持 jQuery 所 做 的 一 切 。Shoestring 
不 支持 toggleclass 方法 , 但 Sprint 支持 ; Sprint 不 支持 pind 方法 , 但 是 Shoestring 支持 。 许 
多 兼容 性 问题 都 可 以 通过 使 用 变通 方案 或 原生 JavaScript 方 法 来 重 构 。 

这 就 够 了 ! 基本 思想 是 ,如 果 你 开始 开发 一 个 新 的 网 站 时 考虑 的 是 jQuery, 那么 应 该 从 一 个 
最 简单 的 库 开 始 ， 比 如 Sprint。 如 果 Sprint 最 终 无 法 满足 需求 ， 则 可 以 尝试 Shoestring 或 Zepto。 
如 果 这 些 选 项 都 不 能 满足 需求 ， 那 么 应 该 转 而 使 用 jQuery。 

如 果 一 开始 就 采用 极 简 主义 , 就 可 以 确保 尽 可 能 保持 简洁 。 这 种 心态 有 助 于 为 用 户 提供 更 快 
的 网 站 。 这 不 仅 适 用 于 jQuery， 也 适用 于 Web 开发 的 所 有 方面 。 我 们 应 当 始 终 拉 心 自问 :“ 我 需 
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要 在 这 个 网 站 中 使 用 新 库 吗 ? ”这 很 可 能 会 引导 你 走 上 一 条 不 同 于 最 初 预 期 的 道路 。 

下 一 节 将 完全 消除 对 jQuery 和 任何 替代 方案 的 需求 ,使 用 原生 JavaScript 实现 目标 。 如 果 你 
已 经 习惯 了 jQuery 的 方法 ， 那 么 这 将 是 一 项 意义 重大 的 任务 ,但 它 可 以 消除 与 库 相 关 的 所 有 开 
销 ， 并 为 客户 提供 更 快 的 体验 。 


8.3 脱离 jQuery 编码 


jQuery 及 其 蔡 代 方案 很 好 , 但 其 中 的 许多 方法 已 经 实现 (或 正在 实现 ) 到 提供 相同 功能 的 浏 
览 器 中 。 元 素 选 择 和 事件 绑 定 等 任务 曾经 是 跨 浏 览 絮 兼容 性 方面 的 负担 , 但 由 于 人 们 在 标准 化 方 
面 的 努力 ， 它 们 现在 已 经 有 了 统一 的 语法 。 

本 节 介 绍 如 何 检查 DOM 是 否 就 绕 、 使 用 querysSelector 和 querySelectorAll 选择 元 
素 使 用 addEventListener 绑 定 事件 .使 用 classList 操作 元 素 上 的 类 使 用 setAttribute 
和 innerHTML 修改 属性 和 元 素 内 容 ， 以 及 使 用 Fetch API 进行 AJAX 调用 。 


想 要 跳 过 ? 
如 果 你 执行 本 节 工 作 时 遇 到 困难 ， 可 以 在 命令 行 键入 git checkout -f native-js 查 
看 完成 的 工作 。 


开始 之 前 ， 需 要 在 命令 行 中 输入 git reset --hard， 在 本 地 仓库 中 撤销 在 客户 端 网 站 上 
所 做 的 所 有 工作 。 这 将 撤销 所 有 本 地 更 改 。 逐 一 转换 所 有 代码 ， 保 留 jQuery， 直 到 都 被 本 地 
JavaScript 替换 。 完 成 后 ， 能 够 删除 对 jquerymin.js 的 引用 ,使 用 async 属性 加 载 behaviors.js， 
并 从 更 快 的 加 载 时 间 中 受益 。 在 文本 编辑 器 中 打开 behaviorsjs， 开 始 工作 吧 ! 


8.3.1 检查 DOM 是 否 准 备 就 绪 


熟悉 jQuery 的 人 知道 ， 执 行 代码 之 前 必须 检查 DOM 是 否 准备 就 绪 。 这 不 仅 适用 于 jQuery， 
通常 也 适用 于 依赖 DOM 的 脚本 。 之 所 以 需要 这 样 做 ， 是 因为 在 脚本 运行 之 前 如 果 DOM 没有 完 
全 加 载 ， 就 会 导致 事件 不 能 绑 定 到 元 素 ， 关 键 行 为 也 无 法 正常 工作 。 下 面 的 代码 清单 提供 了 
behaviors.js 的 截断 版 本 ， 展 示 了 jQuery 如 何 检查 DOM 是 否 就 绪 。 


代码 清单 8-2 jQuery 检查 DOM 是 否 准备 就 绪 
S$(function(){ < 一 检查 DOM 是 否 准 备 就 绪 
/* 简短 起 见 ， 此 处 省 略 behaviors.js 的 内 容 */ 
地 
在 jQuery 中 ,任何 封装 在 $ (function() {}) 中 的 内 容 都 要 在 加 载 并 准备 好 文档 后 才能 执行 。 
为 了 在 原生 JavaScript 中 实现 这 一 点 ,使 用 addEventListener( 稍 后 还 将 使 用 它 绑 定 其 他 事件 ) 
检查 DOM 是 否 准备 就 绪 ， 如 代码 清单 8-3 所 示 。 
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代码 清单 8-3 ”使 用 addEventListener 检查 DOM 是 否 准备 就 绪 


/* 简短 起 见 ， 此 处 省 略 behaviors.js 的 内 容 */ 


人 


就 这 么 简单 ! addEventListener 方法 在 IE9 及 更 高 版 本 中 可 用 ， 具 有 很 高 的 兼容 性 。 


这 个 事件 会 等 待 DOM 准备 
就 绪 


document .addEventListener("readystatechange", function(){ | 


获得 更 深入 的 支持 


如 果 需 要 支持 IE9 之 前 的 下 版 本 ， 可 以 使 用 document .onreadystatechange 方法 监 
听 DOM 就 绪 情 况 。 这 种 方法 也 适用 于 较 新 的 浏览 器 。 


接 下 来 研究 如 何 使 用 queryselector 和 querySelectorAll 方法 选择 页 面 上 的 元 素 ， 以 
及 如 何 将 事件 绑 定 到 这 些 元 素 ， 以 进一步 使 用 addEventListener 方法 。 


8.3.2 选择 元 素 并 绑 定 事件 


jQuery 最 大 的 用 处 在 于 它 能 够 选择 元 素 ， 并 将 事件 绑 定 到 元 素 。 以 原生 方式 选择 元 素 时 ， 
querySelector 和 auerySelectorAll 方法 是 首选 解决 方案 。 与 jQuery 的 核心 $ 方 法 类 似 , 这 
两 个 方法 也 接受 CSS 选择 器 字符 串 作 为 参数 。 该 字符 串 用 于 返回 DOM 中 符合 条 件 的 节点 。 两 者 
的 区 别 在 于 ，querySelector 返回 与 表达 式 匹配 的 第 一 个 元 素 ， 而 querySelectorAll 返回 


所 有 匹配 的 元 素 。 


这 两 种 方法 在 IE9 和 更 高 版 本 的 浏览 器 中 都 获得 了 强大 的 支持 ,在 了 正 8 中 也 获得 了 部 分 支持 。 
代码 清单 8-4 比较 了 这 两 个 方法 与 它们 的 jQuery 等 效 方法 。 


代码 清单 8-4 ”比较 querySelector、querySelectorAll 和 jQuery 的 核心 $ 方 法 


/* 选择 一 个 元 素 */ 


Var element = dqocument .gquerySelector("div.item"); 
Var jqElement = $("div.item") .egq(0); 


/* 选择 元 素 集合 */ 


Var elements = document .querySelectorAll ("div.item"); 
Var jdqELlements = $("div.item"); 


代码 清单 8-4 中 的 第 一 行 通过 querySelector 选择 了 第 一 个 匹配 giv .item 的 元 素 , 第 二 
行 通 过 jQuery 选择 了 第 一 个 匹配 div.item 的 元 素 ， 第 三 行 通过 querySelectorAll 选择 了 所 


有 匹配 aiv.itenm 的 元 素 ， 最 后 一 行 通过 jQuery 选择 了 所 有 匹配 aiv.itenm 的 元 素 。 


当 这 些 方法 返回 一 个 或 多 个 元 素 时 ， 可 以 使 用 addEventListener 方法 将 事件 附加 到 这 些 


元 素 上 。 代 码 清单 8-5 显示 了 add 
dquerySelector 返回 的 项 。 


EVe 


ntListener 的 一 个 简单 用 法 ， 它 将 click 事件 绑 定 到 由 


代码 清单 8-5 使 用 addEventListener 为 元 素 绑 定 点 击 事件 


document .querySelector("#schedule") .addEventListener("click", function(){ 


/* 点 击 时 执行 的 代码 */ 
Ps 
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组 合 使 用 这 些 方法 ,将 有 助 于 消除 behaviors.js 中 大 多 数 依赖 jQuery 的 代码 。 代 码 清单 8-6 
将 触发 预约 安排 的 模 态 


代码 清单 8-6 以 jQuery 为 中 心 的 预约 安排 模 态 框 运行 代码 
// 打开 预约 模 态 框 
$s("#schedule") .bind("click", function()t{ i 


Iml 


oO 


jQuery 式 选 中 元 素 ， 


$s("body") .addClass ("locked"); 区 
并 绑 定点 击 事件 


openModal () 


}); 


此 处 要 重点 关注 的 代码 是 第 一 行 ， 它 选择 预约 安排 按钮 元 素 ( #schedule )， 并 使 用 bina 
方法 将 点 击 事件 绑 定 到 该 元 素 。 使 用 aquerySelector 和 addEventListener 的 组 合 ， 可 以 将 
其 转换 为 代码 清单 8-7。 


代码 清单 8-7 使 用 原生 JavaScript 的 预约 安排 模 态 框 事 件 绑 定 
// 打开 预约 模 态 框 
document .querySelector("#schedule") .addEventListener("click", function(){ 本 


$s("body") .addClass ("locked"); 原生 式 选中 元 素 


openModal () ; 并 绑 定 点 击 事件 
3 ep 


重新 加 载 时 ， 仍 然 可 以 通过 单 击 预 约 按 钮 触发 模 态 机 
jQuery 驱动 ， 但 距离 完全 删除 jQuery 的 目标 越 来 越 近 了 。 
在 文本 编辑 器 中 , 将 其 余 的 bing 事件 切换 为 使 用 addEventListener, 如 代码 清单 8-7 所 
示 。 应 该 还 有 3 个 bina 调用 可 以 替换 。 
接 下 来 ,使 用 原生 的 JavaScript classList 方法 ,替换 jQuery 的 aqadaclass 和 removeClass 
方法 调用 


8.3.3 使 用 classList 操作 元 素 上 的 类 


客户 网 站 的 JavaScript 广泛 使 用 jQuery 的 adadaclass 和 removeClass 方法 来 添加 和 删除 类 。 
而 原生 方法 classList 也 提供 了 相同 的 功能 ,代码 清单 8-8 比较 了 这 个 方法 与 jQuery 对 应 的 方法 。 


代码 清单 8-8 classList 与 jQuery 的 removeClass 和 addclass 方法 


jQuery 的 addclass 
/* 添加 类 */ 方法 使 用 classList 的 adda 
$(".modal") .addClass ("show"); 方法 添加 类 


尽管 事件 处 理 程序 中 的 代码 仍然 由 


iml 
O 


O 


document .querySelector(".modal") .classList.add("show"); 
jQuery 的 
en ve aes /* 移 除 类 */ 使 用 classList 的 remove 
方法 $(".modal") .removeClass ("show"); 方法 移 除 类 
document .querySelector(".modal") .classList.remove ("show"); < 
/* 切换 类 */ 使 用 classList 的 toggle 
jQuery 的 $(".modal") .toggleClass ("show"); 方法 切换 类 
toggleClass document .querySelector(".modal") .classList.toggle("show"); 


方法 
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尽管 客户 网 站 不 使 用 toggleclass 方法 ,但 需要 注意 ，classList 有 一 个 toggle 方法 。 
不 幸 的 是 ,这 个 方法 在 了 正中 的 支持 度 不 是 很 好 。 除 此 之 外 , 对 classList 方法 的 支持 总 体 上 是 
好 的 ，IE10 及 更 高 版 本 都 支持 它 。 代 码 清单 8-9 显示 打开 预约 模 态 框 的 openModal 函数 。 


代码 清单 8-9 依赖 jQuery 的 openModal 因数 


function openModal (){ 
window.scroll(0, 0); 


移 除 .pageFade 元 素 


J hid 
$(".pageFade") .removeClass ("hide"); < 一 。 类 元 素 上 
$s(".modal") .addClass ("open"); 仁 .modal 元 系 
} 添加 open 类 


用 classList 方法 实现 同样 的 结果 要 复杂 一 些 。 需 要 将 jQuery 元 素 选 择 代码 转换 为 使 用 
querySelector 方法 。 代 码 清单 8-10 展示 了 如 何 将 代码 清单 8-9 中 的 代码 转换 成 完全 独立 于 
jQuery 的 代码 。 


代码 清单 8-10 独立 于 jQuery 的 openModal 了 国 数 


function openModal () { 移 除 .pageFadae 元 素 在 .modal 
window.scroll (0, 0); 上 的 hide 类 元 素 上 添加 


document .querySelector(".pageFade") .classList.remove ("hide"); open 类 
document .querySelector(".modal") .classList.add("open"); 


} 


接 下 来 , 需要 搜索 behaviors.js 中 所 有 使 用 removeclass 和 adqaclass 的 方法 , 并 更 新 它们 
以 使 用 classList。 执 行 此 操作 时 ， 请 确保 将 jQuery s 方 法 更 新 为 使 用 queryselector 方法 。 


如 果 不 支持 classList 怎么 办 ? 

你 可 能 需要 支持 IE9 或 更 低 版 本 。 此 时 可 以 改 用 className 属性 , 该 属性 没有 用 于 添加 、 

删除 或 切换 类 的 方法 。 相 反 ， 它 是 一 个 字符 串 ， 你 可 以 使 用 它 将 所 需 的 类 分 配给 目标 元 素 。 虽 
然 它 不 像 classList 那么 方便 ， 但 可 以 在 紧要 关头 正常 工作 。 


将 所 有 代码 更 改 为 使 用 classList 方法 之 后 , 下 面 将 jQuery 的 属性 和 内 容 修改 方法 替换 为 
原生 JavaScript 方 法 。 


8.3.4 读 取 和 修改 元 素 属性 与 内 容 


客户 网 站 依赖 jQuery 完成 的 另 一 项 功能 是 读 取 和 修改 元 素 的 属性 ， 以 及 修改 元 素 内 容 。 这 
些 行为 可 以 很 容易 地 被 原生 JavaScript 方法 替换 。 代 码 清单 8-11 比较 了 jQuery 的 属性 操作 方法 及 
其 原生 JavaScript 等 效 方法 。 


代码 清单 8-11 使 用 jQuery 和 原生 JavaScript 修改 属性 


使 用 jQuery 
/* 读 取 属 性 */ 读 取 属性 


Var jaqAttr = $("link") .attr("media"); 
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使 用 原生 JavaScript | 


Var attr = document .querySelector ("link") .getAttribute("media"); 


使 用 jQuery 
设置 属性 /jx 设置 属性 */ 使 用 原生 JavaScript 
a 1 
S(Tink") attr("media, "print”). 设置 属性 
document .querySelector ("link") .setAttribute("media", "print"); 
使 用 原生 JavaScript 
/* 移 除 属性 */ 
2 移 除 属性 

使 用 jQuery document .cuerySelector("1Link") .removeAttribute("media"); 


$s ("link") .removeAttr ("media"); 
移 除 属性 | 


你 还 需要 知道 如 何 读 取 和 修改 元 素 的 内 容 ， 因 为 客户 网 站 也 使 用 了 这 种 方法 。 与 JavaScript 
的 innerHTML 属性 相 比 ，jQuery 读 取 元 素 内 容 的 方式 如 代码 清单 8-12 所 示 。 


代码 清单 8-12 jQuery 的 html 方法 与 JavaScript 的 innerHTML 属性 


使 用 jQuery 读 取 使 用 innerHTML 属性 
/* 读 取 元 素 的 内 容 */ 元 素 内 容 读 取 元 素 内 容 


Var jaqContents = $(".item") .html(); 
Var contents = document .gquerySelector(".item").innerHTML; 


/* 修改 元 素 的 内 容 */ 使 用 jQuery 设置 
$s(".item") .html ("Hello world!"); 元 素 内 容 
document .guerySelector(".item").innerHTML = "Hello world!"; 使 用 innerHmMr 属性 


设置 元 素 内 容 
jQuery 的 html 方法 和 原生 ijnnerHTML 属性 的 语法 不 同 ， 因 为 ntml 方法 是 一 个 函数 ， 而 
innerHTML 是 一 个 需要 赋值 的 属性 。 
在 客户 网 站 的 JavaScript 中 ， 大 部 分 地 方 不 需要 修改 属性 或 设置 元 素 的 内 容 ， 但 关键 时 刻 还 
是 需要 操作 的 : 当 用 户 提交 预约 请 求 ， 确 认 模 态 框 出 现时 。 这 发 生 在 jQuery ajax 调用 中 的 


success 回调 。 
代码 清单 8-13 ”通过 jQuery 修改 属性 和 元 素 内 容 


消息 文字 被 放 入 
success: function(data)t 状态 文本 域 


$s("#status") .html (data.message); 
document .querySelector(".statusModal") .classList.add("show"); 
document .querySelector(".modal") .classList.remove ("open"); 


if(data.status === true)t 
Ny > $$("#okayButton") .attr("data-status", "success");} 
设置 okay $("#headerStatus") .html ("Thank You!"); < 
te 更 新 标 是 以 反 
属性 elsef{ 映 成 功 /失败 
> ss("#okayButton") .attr("data-status", "failure"); | 状态 
$("#headerStatus") .html ("Error"); 4 


} 
} 


在 代码 清单 8-13 中 , 来 自 预约 安排 电子 邮件 程序 的 消息 文本 将 被 放置 到 状态 文本 域 。 data- 
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status 属性 设置 在 “确定 ”按钮 上 ， 用 于 确定 该 按钮 在 成 功 或 失败 的 上 下 文中 的 作用 。 状 态 模 
态 框 的 标题 将 更 新 ， 以 反映 预约 提交 成 功 与 否 。 
通过 一 些 修 改 , 可 以 将 目前 所 学 的 内 容 转换 为 代码 清单 8-14, 它 在 没有 jQuery 的 情况 下 运行 。 


代码 清单 8-14 通过 原生 JavaScript 修改 属性 和 元 素 内 容 
success: function(data){ 
—> document .gquerySelector("#status").innerHTML = data.message; 


document .querySelector(".statusModal") .classList.add("show"); 
document .querySelector(".modal") .classList.remove ("open"); 
if(data.status === true)t{ 
document .querySelector("#okayButton") 
从 预约 安排 CALs doen ta SUSCeSse < 一 一 
程序 中 赋值 document .querySelector ( #headerStatus") 六 _ 
油 自 和 类 太 .innerHTML = "Thank You!"; 士 ata status 
消息 和 状态 l 属性 上 设置 预约 
文本 elsef 操作 的 状态 
document .querySelector("#okayButton") 
.SetAttribute("data-status", "failure"); < 一 
document .querySelector("#headerStatus") 
> .innerHTML = "Error"; 


} 
} 


还 需要 更 新 一 点 : 使 用 jQuery 的 attr 方法 读 取 属性 。 这 发 生 在 用 户 点 击 状态 模 态 中 的 “ 确 
定 ” 按 钮 时 。 相 关 代 码 如 代码 清单 8-15 所 示 。 


代码 清单 8-15 通过 jQuery 的 attz 方法 获取 属性 


jQuery 点 击 事件 绑 定 2 
s("#okayButton") .bind ("click", function(e){ | 获取 data-status 
if($S(this).attr("data-status") === "failure"){ 的 属性 值 


这 个 地 方 有 点 琅 手 ， 因 为 点 击 绑 定 的 代码 中 使 用 了 jQuery 的 $ (this) 对象 ， 该 对 象 引 用 
#okayButton 元 素 。 将 其 转换 为 前 面 使 用 的 addEventListener 语法 时 ， 代码 就 不 能 这 人 么 使 
用 了 。 需 要 使 用 事件 对 象 (在 函数 调用 中 分 配给 e ) 替换 对 $(this) 对 象 的 引用 ， 并 使 用 
getAttripbute 方法 检索 data-status 属性 的 值 。 代 码 清单 8-16 是 这 两 种 方法 的 有 效 蔡 代 品 。 


代码 清单 8-16 通过 getAttribute 方法 获取 属性 
document .querySelector("#okayButton") .addEventListener("click", function(e)f{ 
if(le.target .getAttribute("data-status") === "failure")f{ 


首 行 是 转换 后 的 点 击 绑 定 ， 函 数 调用 中 包含 了 事件 对 象 。 而 在 最 后 一 行 ，e.target 属性 引 
用 了 点 击 绑 定 对 应 的 元 素 ，getAttribute 方法 可 以 获取 aata-status 属性 的 值 。 
在 没有 jQuery 的 $ (this) 对象 的 情况 下 ， 可 以 使 用 事件 对 象 的 target 属性 ， 引 用 事件 在 
EE 件 代 码 内 部 绑 定 的 元 素 。 常 用 jQuery 的 开发 者 可 能 会 觉得 很 奇怪 ,但 很 快 就 会 习惯 。 
结束 工作 并 从 项 目 中 删除 jQuery 之 前 ， 还 要 替换 最 后 一 个 jQuery 相关 功能 ， 即 用 于 向 服务 
器 发 送 AJAX 请 求 以 安排 预约 的 $.ajax 调用 。 我 们 将 使 用 名 为 Fetch API 的 原生 JavaScript 版 本 ， 
替换 jQuery AJAX 功能 。 


hl 
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8.3.5 使 用 Fetch API 发 起 AJAX 请 求 


在 过 去 的 AJAX 请 求 中 ， 必 须 使 用 xMLHttpRequest 请 求 对 象 。 这 是 一 种 处 理 AJAX 请 求 
的 笨 办 法 ， 不 同 浏览 器 需要 不 同 的 方法 。jQuery 通过 围绕 XMLHttpRequest 对 象 包装 了 自己 的 
AJAX 功 能 ,使 AJAX 请 求 成 为 一 个 更 简便 的 任务 。 到 目前 为 止 它 仍 然 工作 得 很 好 ,但 有 一 些 浏 
览 器 已 经 实现 了 名 为 Fetch API 的 原生 资源 获取 API。 


8.3.6 ”使 用 Fetch API 


Fetch API 最 基本 的 用 途 是 资源 的 GET 请 求 。 一 个 很 好 的 例子 是 与 API 交互 ,该 API 允许 访 
问 电影 数据 库 并 返回 JSON 数据 。 使 用 fetch 的 请 求 如 代码 清单 8-17 所 示 。 


代码 清单 8-17 ”Fetch API 驱动 的 AJAX 请 求 ， 返 回 JSON 格式 的 响应 


fetch("https://api.moviemaniac.com/movies/the-burbs") 
.then (function(response)t 
return response.json(); 

}) .then (function(data)t{ 
console.log(data);} 

js 


在 这 个 代码 中 ,fetch 方法 至 少 接受 一 个 参数 , 即 资源 的 URL。 成 功 后 会 返回 一 个 promise， 
它 允 许 你 使 用 JSON 数据 。 原 始 响 应 对 象 有 一 个 json 方法 ,你 可 以 将 其 返回 给 链 中 的 下 一 个 
promise。 返 回 的 下 一 个 promise 则 带 有 编码 的 JSON 数据 。console.1og (data) ; 行 负责 将 响 
应 中 的 数据 输出 到 控制 台 。 

这 只 是 Fetch API 的 一 个 基本 用 法 。 客 户 网 站 使 用 jQuery 的 $.ajax 方法 以 及 PosT 请 求 发 送 
表单 数据 。 与 使 用 jQuery 的 $ .ajax 函数 相 比 ， 完 成 这 项 工作 需要 更 多 工作 ， 但 使 用 的 代码 更 少 。 

坦白 说 ， 你 将 表单 提交 到 了 一 个 模拟 位 置 ， 该 位 置 返回 一 个 JSON 响应 以 用 于 说 明 目 的 。 如 
果 你 在 自己 的 网 站 上 用 后 端 脚本 尝试 这 种 方法 ， 会 发 现 它 也 可 以 正常 工作 。 代 码 清单 8-18 使 用 
Fetch API 代 替 了 jQuery。 


代码 清单 8-18 Fetch API 驱动 的 AJAX 请 求 


Fetch API 向 预约 通过 FormData 对 
Si 安插 程 > 关 j 埋 了 十 壮 : 去 起 
请 求 fetch("js/response.json", { 安排 程序 发 送 请 求 象 封装 请 求 体 
方法 L method: "post", 
body: new FormData (document .querySelector ("#appointmentForm")) 
和 当 }) .then (function(response)t{ 、 二 天 ， 
调度 程序 的 一 > return response.json(); 返回 链 中 最 后 个 ns 
响应 实现 了 }) .then(function(dqata) { 运行 提交 后 的 代码 
promise 


document .querySelector("#status").innerHTML = data.message; 
document .querySelector(".statusModal") .classList.add("show"); 


JSON 响应 document .querySelector(".modal") .classList.remove ("open"); 
RS 


返回 给 链 中 
的 下 一 个 
promise 


if(data.status === true) { 
document .querySelector("#okayButton") 
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.SetAttribute("data-status", "success"); 
document .querySelector("#headerStatus") .innerHTML = "Thank You!"; 
} 
elsel{ 
document .querySelector ("#0okayButton") .setAttribute("data-status", 
"failure™); 
document .querySelector("#headerStatus") .innerHTML = "Error"; 


} 


这 段 代码 运行 时 , 测试 预约 安排 模 态 框 , 你 应 该 会 看 到 它 工作 正常 。 对 原生 API 来 说 还 不 错 ， 
而 且 它 比 我 们 过 去 几 年 通常 使 用 的 xMLHttpRequest 更 有 吸引 力 。 

所 有 这 些 都 不 是 针对 jQuery 的 $ .ajax API。 这 是 一 个 很 好 的 XMLHttpRequest 包装 器 , 但 
是 随 着 浏览 器 对 Fetch API 的 支持 越 来 越 多 ， 放 弃 $ .ajax 也 可 以 。 当 然 ， 如 果 要 依赖 fetch， 
则 需要 能 够 对 那些 尚 不 支持 fetch 的 浏览 器 进行 polyfill。 


8.3.7 Fetch API 的 polyfill 


如 我 们 所 料 ， 并 非 每 个 浏览 器 都 支持 Fetch API。 此 时 ， 有 如 下 几 个 选项 。 

口 可 以 不 使 用 fetch， 并 使 用 jQuery 的 $.ajax API 的 独立 实现 。 

口 可 以 在 wingdow 对 象 中 探查 fetch 方法 。 如 果 找 到 方法 ， 就 可 以 使 用 fetch， 和 否则 ， 可 
以 使 用 标准 的 XMLHttpRequest 对 象 。 或 者 不 管 怎样 都 使 用 xMLHttpRequest 对 象 ， 
因为 它 的 支持 度 很 好 ( 尽管 使 用 起 来 很 痛苦 )。 

口 可 以 探查 fetch 方法 ， 如 果 找 不 到 ， 则 异步 加 载 polyfill。 

本 节 我 们 将 选择 第 三 种 方法 ， 因 为 它 是 最 理想 的 。 支 持 Fetch API 的 浏览 絮 将 依赖 于 原生 浏 
览 器 方法 ， 而 且 没 有 外 部 脚本 的 开销 。 不 支持 Fetch API 的 浏览 器 会 产生 polyfill 的 开销 , 但 语法 
是 统一 的 。 

可 以 在 https://github.com/github/fetch 上 找到 Fetch API 的 一 个 健壮 的 polyfill。 为 了 简单 起 见 ， 
在 客户 网 站 仓库 中 ， 这 个 脚本 的 一 个 压缩 版 本 已 经 作为 fstch.min.js 打包 在 js 文件 夹 中 。 

使 用 前 面 章节 中 熟悉 的 加 载 polyfill 的 方法 ,可 以 基于 fetch 对 象 的 存在 ， 有 条 件 地 加 载 此 
脚本 。 可 以 在 index.html 的 底部 ， 闭 合 </body> 标 签 之 前 ， 放 置 一 个 内 联 <script>。 


代码 清单 8-19 有 条 件 地 加 载 Fetch API polyfill 


创建 一 个 <script> | <script> R 

仿 查 S 
元 素 , 加 载 Fetch API (function(document, window){ en 方法 
polyfill if(!window.fetch){ 千 


var fetchScript document .createElement ("script");} 


fetchScript.src "s/fetch.min.js"; 
异步 加 fetchScript.async = "async"; 设置 脚本 源 
载 脚 本 document .body .appendChild(fetchScript); 
} 2 
添加 <script> 元 素 
}) (document, window); ds 4 
ye 从 而 初始 化 脚本 加 载 
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你 可 能 考虑 到 了 依赖 关系 的 问题 ， 因 为 behaviors.js 依赖 于 fetch。 此 处 关键 在 于 对 fetch 
的 调用 不 是 在 页 面 加 载 时 执行 的 。 在 用 户 有 机 会 打开 预约 模 态 框 、 填 写 表 单 ， 并 点 击 提交 之 前 ， 
polyfill 有 足够 的 时 间 加 载 。 这 是 一 种 软 依赖 ， 所 以 在 后 台 加 载 对 你 有 益处 ， 可 以 在 图 8-12 中 看 
到 其 如 何 运作 。 


页 面 开始 behaviors ,js Fetch API 用 户 调用 
加 载 加载 polyfill 加 起 预约 模 态 杠 
| 
时 间 | 


图 8-12” Fetch API polyfill 的 加 载 及 用 户 与 预约 模 态 框 进行 交互 的 时 序 图 


可 以 在 不 支持 Fetch API 的 浏览 锅 〈 如 正 ) 中 测试 此 方法 ， 并 查看 其 工作 情况 。 通 过 在 该 浏 
览 器 的 开发 者 工具 中 检查 网 络 请 求 ， 判 断 fetch.min.js 是 否 已 加 载 。 

所 有 jQuery 方法 都 被 原生 JavaScript 蔡 换 了 ， 现 在 可 以 删除 对 jquery.min.js 的 引用 ， 并 使 用 
async 属性 异步 加 载 behaviors.js。 现 在 ， 客 户 网 站 正在 以 最 佳 方式 运行 ， 你 可 以 学 习 如 何 使 用 
JavaScript 的 requestAnimationFrame 设置 元 素 的 动画 了 。 


8.4 使 用 requestaAnimationFrame 设置 动画 


JavaScript 早期 的 动画 不 如 现在 这 么 完美 。 为 了 实现 最 终 效 果 ， 通 常 需要 使 用 诸如 
setTimeout 或 setInterval 之 类 的 计时 器 孔 数 。 随 着 时 间 的 推移 ， 浏 览 器 的 功能 不 断 增 强 ， 
出 现 了 一 种 更 新 的 、 性 能 更 高 的 方法 ， 可 以 帮助 我 们 用 JavaScript 制作 元 素 的 动画 。 

本 节 讨 论 传统 的 基于 计时 器 的 动画 ， 以 及 如 何 使 用 requestAnimationFrame 代替 它们 。 
你 将 看 到 reaquestAnimationFrame 与 其 基于 计时 器 的 “前 裴 ” 和 CSS 过 渡 的 性 能 比较 ， 然 后 
将 该 方法 应 用 于 科 伊 尔 家 电 维 修 网 站 。 


8.4.1 requestAnimationFrame 一 览 


用 JavaScript 制作 动画 与 CSS 是 不 同 的 。 在 CSS 中 ,你 向 元 素 应 用 一 个 transition 属性 ， 
告诉 浏览 器 一 个 〈 或 多 个 ) 特定 属性 将 更 改 。 属 性 更 改 时 ,浏览 带 将 为 起 点 和 终点 之 间 的 过 渡 设 
置 动 画 。 运 行动 画 的 底层 逻辑 都 由 浏览 器 处 理 。 而 使 用 JavaScript 时, 你 必须 自己 执行 这 项 工作 。 
下 面 看 看 传统 上 如 何 用 JavaScript 实现 动画 ， 并 将 其 与 requestAnimationFrame 进行 比较 。 


8.4.2 ”计时 器 函数 驱动 的 动画 和 requestAnimationFrame 


在 JavaScript 中 设置 动画 时 , 可 以 通过 元 素 的 style 对 象 , 使 用 计时 器 函数 更 改元 素 在 屏幕 
上 的 外 观 或 位 置 ， 以 呈现 运动 迹象 。 可 以 说 ，setTimeout 和 setInterval 过 去 就 是 用 于 在 一 
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个 间隔 内 设置 元 素 动 画 的 计时 器 函数 ， 间 隔 通常 为 1000 ms/60， 目 的 是 以 大 约 每 秒 60 帧 的 速度 
设置 效果 动画 。 这 种 动画 的 典型 代码 看 起 来 如 代码 清单 8-20 所 示 。 


代码 清单 8-20 ”使 用 计时 器 函数 设置 动画 ( setTimeout ) 
function Qraw(){ 
document .querySelector(".item") .style.width = | 


(parseInt (document .style.width) + 2)) + "px"; 


setTimeout (draw, 1000 / 60); 
) 以 60 帧 的 速 


率 递归 运行 
draw() ; < 初始 函数 调用 ， Cag 
触发 araw 函数 


以 2 像素 作为 间隔 修改 
元 素 的 left 属性 


计时 器 本 身 成 本 不 高 , 但 它们 对 于 动画 代码 来 说 不 是 最 佳 选择 。 为 了 解决 这 一 问题 ,人 们 开 
发 了 requestAnimationFrame 方法 。 这 个 方法 的 用 法 类 似 于 代码 清单 8-20， 如 代码 清单 8-21 
所 示 。 


代码 清单 8-21 使 用 requestanimationFrame 设置 动画 
function draw(){ 
document .querySelector(".item") .style.width = 
(parseInt (document .style.width) + 2)) + "px"; 
requestAnimationFrame (draw); No 
时 sy 运行 特定 函数 ， 
但 未 指定 间隔 


draw(); 


乍 一 看 这 段 代 码 似乎 有 些 人 欠缺 ， 因 为 与 setTimeout 不 同 ， requestAnimationFrame 不 
人 允许 用 户 以 毫秒 为 单位 指定 间隔 。 那 么 它 是 如 何 工作 的 呢 ? 原理 很 简单 : 间隔 在 
requestAnimationFrame 内 部 处 理 ， 它 根据 显示 的 刷新 率 〈 大 多 数 设备 上 的 刷新 率 往往 为 
60 Hz ) 起 作用 ; requestAnimationFrame 在 典型 设备 上 的 目标 是 60 帧 速率 。 如 果 设 备 具 
不 同 的 刷新 率 ， 那 么 requestAnimationFrame 将 相应 匹配 。 

不 可 和 否认， 这 个 例子 并 不 理想 ， 因 为 它 在 无 限 长 的 时 间 内 为 元 素 的 1eft 属性 设置 动画 , 但 
它 说 明了 这 个 概念 。 稍 后 我 将 在 客户 网 站 上 展示 一 个 真实 的 实现 ， 但 在 此 之 前 ， 你 需要 对 比 
requestAnimationFrame 与 传统 的 基于 计时 器 的 动画 和 CSS 过 渡 的 性 能 。 


8.4.3 比较 性 能 


如 前 所 述 ，requestAnimationFrame 比 其 基于 计时 露 的“ 前辈”setTimeout 和 
setInterval 具有 更 好 的 性 能 。 为 了 测试 这 些 方法 ， 我 为 每 个 方法 编写 了 一 个 简单 的 动画 。 动 
画 是 从 左 到 右 移 动 256 像素 的 长 方 体 , 同时 其 宽度 和 高 度 增加 一 倍 ,透明度 提 高 到 50%。 图 8-13 
比较 了 使 用 setTimeout 、requestAnimationFrame 这 两 个 方法 和 CSS 过 渡 时 的 性 能 ， 如 
Chrome 的 Performance 面板 所 示 。 
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动画 技术 的 性 能 
(数值 越 低 越 好 ) 


100 eo 和] 
setTimeout 


requestAnimationFrame 


| | Css 过 流 


执行 脚本 演 染 绘制 
图 8-13 ”Chrome Performance 面板 中 各 种 动画 方法 的 归 一 化 性 能 


DH 


out 和 requestAnimationFrame 需要 记 住 的 一 点 是 ， 因为 它们 依赖 于 


JavaScript， 所 以 需要 比 CSS 过 渡 更 多 的 脚本 时 间 ， 这 是 正常 的 。 但 是 与 其 他 两 种 方法 相 比 ， 


requestAnimatio 


nFrame 在 绘制 和 演 染 方面 花费 的 时 间 更 少 。 


我 们 已 经 了 解 了 requestAnimationFrame 的 用 法 及 其 性 能 ， 下 面 再 次 启动 科 伊 尔 家 电 维 
修 网 站 ， 并 设置 预约 模 态 框 的 动画 。 


8.4.4 ”实现 requestAnimationFrame 


自从 科 伊 尔 家 


有 维修 网 站 发 布 以 来 ， 几 乎 没有 停机 ， 现 在 尝试 使 用 requestAnimation- 


Frame 可 能 会 很 有 趣 。 在 科 伊 尔 网 站 上 ， 唯 一 出 现 的 动画 是 打开 预约 模 态 框 。 我 们 使 用 过 CSS 


过 渡 ,但 现在 要 尝试 


为 此 需要 获取 最 新 代码 ， 因 此 ， 键 入 以 下 命令 以 切换 到 新 分 支 : 


一 个 基于 计时 需 的 动画 ,你 希望 将 其 转换 为 使 用 requestaAnimationFrame。 


git checkout -f requestanimationframe 


我 为 客户 的 网 站 编写 了 一 个 灵活 的 函数 来 测试 setTimeout 和 requestAnimationFrame 
在 behaviors.js 中 的 动画 效果 。 


代码 清单 8-22 使 用 setTimeout 实现 动画 函数 


效果 的 间隔 , 以 
60 帧 速率 计算 


Var element 


从 DOM 中 选择 元 素 ， 
并 保存 到 变量 


document .GuetySelector (selector) ， 


function animate(selector, duration, property, from, to, units)t 


0 + duration, he 
interval = ( | ) ， 结束 时 间 
绘制 下 也 progress = function()t{ 


动画 Var progress = Math.abs(((endTime - +new Date()) / duration) - 1); 
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return (progress * (to - from)) + from; 


} 递增 动画 并 首 
检查 效果 draw = function(){ 归 调用 draw 
的 持续 时 if(endTime > +new Date())t{ 函数 
间 是 否 已 element .style[property] = progress() + units; i 、 
过 期 setTimeout (draw, interval); 如 果 持续 时 间 已 过 , 则 将 
) 元 素 设置 为 最 终 位 置 
elSset 
element .style[Property] = to + _ unitg 一 | 
return; 
} 初始 调用 以 开始 
}; 绘制 动画 
draw(); < 一 


} 


虽然 不 像 jQuery 的 animate 功能 那样 完整 ， 但 这 比 代码 清单 8-20 所 示 的 实现 灵活 得 多 。 

在 图 8-14 所 示 的 调用 中 ， 你 告诉 animate 选择 .modal 元 素 ， 并 在 500 毫秒 的 时 间 内 将 其 
top 属性 的 动画 从 -150% 设 置 为 105。 如 果 点 击 预约 安排 按钮 ， 并 启动 模 态 框 ， 你 将 看 到 它 在 
JavaScript 动画 代码 中 可 以 正常 打开 。 但 是 ， 将 这 个 函数 转换 为 使 用 requestAnimationFrame 
需要 做 什么 样 的 工作 呢 ? 需要 做 的 工作 非常 少 。 代 码 清单 8-23 显示 了 如 何 将 animate 函数 的 
draw 方法 修改 为 使 用 requestAnimationFrame， 修改 以 粗 体 显 示 。 


DOM 元 素 CSS 属 性 结果 值 


animate(".modal", 500, "top", -150, 10, "%$"); 
时 间 起 始 值 ” CSS 单位 
(毫秒 ) 


图 8-14 ”通过 被 标记 的 参数 使 用 animate 功能 


代码 清单 8-23 使 用 reaquestanimationFrame 代替 setTimeout 


draw = function(){ 
if(endTime > +new Date())t{ 
element .style[property] = progress() + units; 
requestAnimationFrame (draw); 
} 
elsel{ 
element .style[property] = to + units; 
return; 
} 
让 


基本 上 就 是 这 样 。 删除 对 setTimeout 的 调用 3 并 将 其 替换 为 对 requestAnimationFrame 
的 调用 。 一 切 都 应 该 像 以 前 一 样 工作 ， 只 需要 一 个 更 高 性 能 的 动画 方法 。 如 果 想 做 一 些 清 理 , 也 
可 以 删除 interval 变量 ， 因 为 requestAnimationFrame 不 需要 使 用 它 。 
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requestAnimationFrame 并 未 受到 普遍 支持 ,那么 可 以 做 什么 来 确保 更 好 的 支持 呢 ? 首 
先 ， 可 以 创建 一 个 占 位 符 ， 以 便 优先 使 用 reaquestAnimationFrame， 当 它 不 存在 时 问 退 到 
setTimeout， 如 代码 清单 8-24 所 示 。 


代码 清单 8-24 requestAnimationFrame 回 退 到 使 用 setTimeout 


window.raf = (function(){ < 一 定义 回 退 方法 
return window.regquestAnimationFrame || function(callback)t{ 
以 60 帧 速率 var interval = 1000 / 60; 
计算 间隔 window.setTimeout (callback, interval); 
如 果 依赖 set Timeout， 霸 国 罚 先 同 用 
0 则 设置 回调 和 间隔 的 方法 


如 果 使 用 这 种 方法 , 则 需要 更 新 代码 , 使 用 自 定义 的 raf 方法 来 代 蔡 requestAnimation- 
Frame 方法 , 但 这 将 为 应 用 的 动画 方法 提供 尽 可 能 广泛 的 支持 。 使 用 这 种 方法 , 可 以 在 它 可 用 时 
获得 requestAnimationFrame 的 好 处 ， 在 不 可 用 时 回 退 到 setTimeout。 还 算 不 错 。 

接 下 来 将 简要 介绍 如 何 使 用 Velocity.js, 这 是 一 个 简单 的 requestAnimationFrame 驱动 的 
JavaScript 动画 库 。 


8.4.5 了 解 Velocityjs 


上 述 对 requestAnimationFrame 的 这 种 尝试 可 能 会 给 你 留 下 更 多 问题 ， 而 不 是 答案 。 使 
用 此 方法 代替 CSS 过 渡 或 jQuery 动画 可 能 会 很 有 挑战 性 ， 特 别 是 在 需求 很 复杂 的 情况 下 。 本 节 
简要 介绍 Velocityjs， 它 可 以 使 动画 与 jQuery 的 动画 方法 一 样 方便 。 

Velocityjs 是 一 个 动画 库 ， 它 使 用 的 API 类 似 于 jQuery 的 animate 方法 。Velocity 最 好 的 一 
点 是 它 独立 于 jQuery。 但 如 果 你 的 项 目 使 用 jQuery， 且 严重 依赖 其 animate 方法 ,那么 加 入 
Velocityjs 将 使 动画 过 程 与 jQuery 相同 。 例 如 ， 考 虑 以 下 这 个 jQuery 动画 代码 : 


S(".item") .animate(({ 
opacity: 1, 
left: 8px 

}, 500); 


可 以 更 改 此 动画 代码 以 使 用 Velocityjs， 如 下 所 示 (修改 以 粗 体 显示 ): 


$s(".item") .velocity(t{ 
opacity: 1, 
left: 8px 
F700) 
简单 地 从 animate 改 为 velocity, 你 就 使 用 Velocity 动画 引擎 代 奉 了 jQuery, 它 提供 了 平 
滑 的 requestAnimationFrame 驱动 的 性 能 ,以 及 使 动画 具有 自然 运动 感 的 简化 功能 ,与 JQuery 
的 animate 方法 不 同 ， 它 允许 为 颜色 、 过 渡 和 滚动 设置 动画 。 
如 果 使 用 不 带 jQuery 的 Velocityjs， 话 法 会 有 一 些 变化 。 当 Velocity 加 载 时 ， 它 将 检查 是 否 
加 载 了 jQuery。 如 果 jQuery 不 存在 ， 则 示例 中 显示 的 设置 同一 元 素 动画 的 语法 将 更 改 为 : 
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Velocity (document .querySelector(".item"), { 
Opacelity “Ly 
left: 8px 

yc 
duration: 500 

区 


除了 语义 之 外 , 这 个 语法 没有 太 大 的 区 别 。 无 论 有 没有 jQuery, Velocityjs 都 可 以 使 JavaScript 
驱动 的 动画 更 加 流畅 和 高 效 ， 而 用 户 不 必 编 写 自己 的 动画 代码 。 

请 注意 ， 这 个 库 经 过 最 小 化 和 压缩 后 大 约 是 13 KB， 所 以 只 有 在 网 站 动画 和 性 能 非常 重要 时 
才 应 考虑 使 用 它 。 在 一 个 没有 太 多 动画 的 网 站 上 增加 13 KB 的 开销 将 影响 用 户 体 验 。 你 也 可 以 通 
过 编写 自己 的 动画 代码 或 使 用 CSS 过 渡 来 更 好 地 提供 服务 。 
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本 章 我 们 学 习 了 许多 关于 如 何 保 持 JavaScript 精简 和 快速 的 概念 。 

口 取决 于 位 置 ，<script> 标 签 可 以 阻塞 泻 染 ， 从 而 延 殿 页 面 在 浏览 需 中 的 显示 。 将 

<script> 标 签 放 在 文档 底部 可 以 加 快 页 面 泻 染 速度 。 

口 如 果 可 以 管理 脚本 的 执行 ， 则 使 用 async 属性 可 以 进一步 提供 性 能 。 

口 管理 使 用 async 的 相互 依赖 的 脚本 的 执行 可 能 是 一 项 挑战 。 第 三 方 脚本 加 载 库 〈 如 
Alameda 或 RequireJS ) 可 以 为 管理 脚本 依赖 项 提供 一 个 方便 的 接口 ， 同 时 还 能 提供 异步 
加 载 和 执行 脚本 的 好 处 。 

口 尽管 jQuery 很 有 用 ， 但 它 占 用 的 空间 相对 较 大 。 其 一 部 分 功能 可 以 通过 兼容 jQuery 的 替 

代 方 案 来 更 好 地 提供 ， 这 些 蔡 代 方 案 的 文件 体积 更 小 ， 在 某 些 情况 下 性 能 也 更 好 。 

口 随 着 时 间 的 推移 ， 浏 览 器 提供 了 更 多 类 似 于 jQuery 的 功能 。 可 以 使 用 queryselector 
和 dquerySelectorAll 选择 元 素 ， 并 使 用 addEventListener 将 事件 绑 定 给 它们 。 还 
可 以 使 用 classList 操作 元 素 类 ， 使 用 getAttribute 和 setAttribute 获取 和 设置 
元 素 属性 , 并 使 用 innerHTML 修改 元 素 内 容 。 有 关 jQuery 方法 及 其 浏览 器 原生 等 价 方法 
的 清单 ， 请 参阅 附录 B。 

口 Fetch API 提 供 了 一 个 方便 的 原生 接口 ， 用 于 通过 AJAX 请 求 远程 资源 。 对 于 不 支持 它 的 

浏览 锅 ， 也 可 以 有 效 地 polyfill 它 。 

口 requestAnimationFrame API 是 一 个 较 新 的 JavaScript 郴 数 ， 可 以 用 它 代 替 setTimeout 
或 setInterval 设置 动画 。 它 比 那 些 旧 的 基于 计时 器 的 方法 性 能 更 高 , 泻 染 和 绘制 速度 
也 比 CSS 过 渡 快 。 

第 9 章 将 学 习 JavaScript 中 的 Service Worker, 你 将 看 到 如 何 使 用 它们 为 连接 受 限 或 没有 互联 

网 的 用 户 提供 离线 体验 ， 以 及 如 何 提 高 网 站 性 能 。 


使 用 Service Worker 
提升 性 能 


本 章 内 容 

口 了 解 Service Worker， 以 及 可 以 在 Service Worker 中 实现 的 功能 
口 在 一 个 简单 的 网 站 上 安装 Service Worker 

口 在 Service Worker 内 部 缓存 网 络 请 求 

口 更 新 Service Worker 


随 着 Web 的 成 熟 ， 它 所 依赖 的 技术 也 随 之 成 熟 。 浏 览 网 页 时 ,我 们 不 再 被 束缚 在 办 公 桌 上 。 
随 着 移动 设备 的 出 现 ， 人 们 通过 Wi-Fi 和 数据 网 络 访问 内 容 ， 其 质量 和 可 靠 性 各 不 相同 ， 这 就 给 
我 们 访问 内 容 的 方式 带 来 了 挑战 , 尤其 是 在 互联 网 连接 不 畅 或 缺乏 连接 的 情况 下 , 用 户 可 能 会 陷 
入 困境 。 

有 时 我 们 会 离线 ， 例 如， 在 没有 Wi-Fi 的 飞机 上 ， 或 汽车 、 火 车 通过 隧道 的 时 候 。 这 就 是 现 
实生 活 。 这 种 情况 发 生 时 ， 我 们 已 经 习惯 于 无 法 浏览 网 站 。 但 不 一 定 非 要 这 样 ， 这 就 是 Service 
Worker 出 现 的 原因 。 

本 章 我 们 将 了 解 Service Worker， 包 括 它 的 工作 原理 ， 如 何 使 用 它 拦截 网 络 请 求 ， 以 及 如 何 
在 设备 离线 时 使 用 它 缓 存 网 站 资源 。 除 了 为 用 户 提供 离线 体验 之 外 ， 你 还 将 了 解 到 使 用 Service 
Worker 带 来 的 性 能 优势 ， 这 将 使 用 户 重 复 访 问 网 站 时 的 速度 比 以 前 更 快 。 

与 你 编写 的 任何 代码 一 样 ， 有 时 Service Worker 也 需要 进行 更 改 。 但 更 改 Service Worker 并 
不 像 更 改 网 站 的 其 他 组 件 那么 简单 ， 因 此 我 们 将 介绍 更 改 Service Worker 时 需要 执行 的 操作 。 下 
面 开 始 了 解 Service Worker 吧 ! 


9.1 何 为 Service Worker 


Service Worker 是 Worker 的 一 种 一 一 Worker 是 在 不 同 于 普通 脚本 的 特殊 范围 内 运行 的 脚本 
的 一 种 标准 ， 并 且 这 种 标准 还 在 不 断 发 展 中 。Worker 在 单独 的 处 理 线程 上 执行 任务 ， 而 不 是 用 
使 用 <script> 标 签 编写 和 引用 的 典型 JavaScript 人马 。 图 9-1 显示 了 一 个 在 自己 的 线程 上 运行 的 


Service Wofker。 
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100 ms 150 ms 200 ms 250 ms 300 ms 


Interactions 


v Main 


| | ‘Parse HTML (devjeremywagner.me/ [1...]) | VNR 


Eval...:1) Evaluate Scrip...preload.js:1) 


P Raster 


Pp ServiceWorker Thread 
图 9-1 在 Chrome Performance 面板 视图 的 底部 ， 可 以 看 到 一 个 在 自己 的 线程 上 运行 
的 Service Worker， 这 个 线程 被 标记 为 ServiceWorker Thread 


因为 Service Worker 在 单独 的 线程 上 操作 ， 所 以 它 的 行为 与 通过 <script> 标 签 加 载 的 
JavaScript 不 同 。Service Worker 无 法 直接 访问 父 页 面 上 的 wingdow 对 象 。 尽 管 它 也 可 以 与 父 页 面 
通信 ， 但 必须 通过 中 介 (如 postMessage API ) 间接 地 进行 。 

Worker 解决 的 问题 取决 于 我 们 谈论 的 Worker 类 型 。 例 如 ，Web Worker 允许 浏览 器 执行 CPU 
密集 型 任务 ， 而 不 会 减 慢 或 停止 浏览 器 的 UI。 本 章 将 详细 介绍 Service Worker， 它 允许 用 户 拦截 
网 络 请 求 , 并 通过 cachestorage API 有 条 件 地 将 项 目 存储 在 一 个 特殊 的 缓存 中 。 此 缓存 与 浏览 
器 本 地 缓存 分 开 ， 使 用 它 即 可 在 用 户 离线 时 ， 从 cachestorage 缓存 向 用 户 提供 内 容 。 还 可 以 
使 用 这 个 特殊 的 缓存 提高 页 面 的 泻 染 性 能 。 

一 个 正在 使 用 的 Service Worker 的 理论 例子 就 是 博客 。 如 果 页 面 在 用 户 阅 读 文章 时 通过 
CacheStorage 缓存 文章 , 那么 当 用 户 失 去 连接 时 , 依然 可 以 离线 查看 这 些 文章 。 这 在 各 种 情况 
下 都 可 能 起 作用 ， 例 如 蜂 窒 或 Wi-Fi 连接 较 弱 ， 或 网 络 连接 不 可 用 时 。 

Service Worker 可 以 帮助 我 们 解决 这 个 问题 ， 但 不 是 通过 克服 连接 质量 不 佳 或 缺少 连接 的 问 
题 ， 而 是 通过 泻 染 用 户 已 经 看 到 的 缓存 内 容 ， 以 便 他 们 有 东西 可 看 ( 而 不 是 什么 都 看 不 到 )。 它 
并 没有 解决 无 法 访问 更 新 内 容 的 问题 ， 而 是 解决 了 Web 浏览 体验 中 断 的 问题 。 

Service Worker 接口 本 身 是 轻 量 的 ， 它 由 在 特定 实例 中 触发 的 事件 组 成 ， 例 如 安装 Service 
Worker 或 发 出 网 络 请 求 时 。 这 些 事件 是 用 addEventListener 方法 监听 的 ,第 8 章 介绍 过 这 个 
方法 。 本 章 将 编写 的 Service Worker 的 主要 任务 是 fetch 事件 。 此 事件 用 于 拦截 网 络 请 求 ， 并 从 
cacheStorage 缓存 中 存储 或 请 求 项 ， 如 图 9-2 所 示 。 
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用 户 
Service Worker 
”| function() 


CacheStorage 缓存 
图 9-2 在 用 户 和 Web 服务 器 之 间作 为 代理 进行 通信 的 Service Worker。Service Worker 
可 以 拦截 用 户 发 出 的 请 求 。 根 据 Service Worker 代码 的 编写 方式 , 可 以 从 Service 
Worker 的 CacheStorage 缓存 中 检索 资源 ， 也 可 以 将 请 求 传递 到 Web 服务 器 。 
Service Worker 还 可 以 在 特定 实例 中 写 人 缓存 


有 了 这 个 事件 驱动 的 接口 ， 当 网 络 连接 很 差 或 完全 不 存在 时 ，Service Worker 就 可 以 帮助 你 
创建 离线 体验 。 具 体 的 做 法 是 ， 通 过 一 个 接口 拦截 网 络 请 求 并 从 cachestorage 缓存 中 读 取 或 
写 入 数据 。 下 一 节 编 写 第 一 个 Service Worker 时 ， 就 会 用 到 CacheSstorage。 

我 们 对 Service Worker 的 工作 有 了 一 点 了 解 ， 下 面 深入 了 解 并 学 习 如 何 使 用 它 。 


9.2 编写 第 一 个 Service Worker 


本 节 我 们 将 开始 编写 第 一 个 Service Worker。 首 先 ， 学 习 如 何 检查 浏览 器 是 否 支 持 Service 
Worker， 如 果 支 持 ， 就 着 手 安装 一 个 Service Worker。 然 后， 编写 Service Worker 的 内 在 逻辑 ,并 
用 它 拦截 网 络 请 求 。 最 后 ， 衡 量 Service Worker 提供 的 性 能 好 处 。 

你 将 为 之 编写 Service Worker 的 项 目 ， 是 我 的 博客 的 静态 版 本 。 我 一 直 在 努力 寻找 新 的 方法 
来 提高 网 站 性 能 ， 同时 允许 读者 在 离线 时 阅读 旧 内 容 。 首 先 ， 从 GitHub 获取 代码 副本 ， 并 在 计 
算 机 上 运行 。 为 此 ， 请 输入 以 下 命令 : 


git clone https://github.com/webopt/ch9-service-Workers.git 
cd ch9-service-Workers 

npm install 

node http.js 
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Service Worker 需要 HTTPS 1! 
为 了 方便 起 见 ,Service Worker 可 以 在 不 使 用 HTTPS 的 本 地 主机 上 运行 ,但 是 ,由 于 Service 
Worker 能 够 拦截 网 络 请 求 并 在 后 台 运 行 ， 因 此 在 产品 Web 服务 器 上 需要 使 用 HTTPS。 你 在 本 
地 主机 上 有 一 定 的 回旋 余地 ， 但 是 进入 生产 环境 时 ， 你 需要 一 个 有 效 的 SSL 证 书 。 


完成 后 , 网 站 将 在 本 地 计算 机 上 运行 。 确 认 站 点 正在 运行 后 , 即 可 编写 第 一 个 Service Worker! 


9.2.1 安装 Service Worker 


Service Worker 的 安装 过 程 只 需要 很 少 的 代码 。 需 要 检查 浏览 器 是 否 支 持 Service Worker。 如 
果 浏 览 器 支持 ， 则 可 以 继续 安装 ， 否 则 什么 都 不 会 发 生 。 这 可 以 确保 即使 用 户 的 浏览 需 无 法 使 用 
Service Worker， 网 站 也 能 继续 运行 。 图 9-3 体现 了 这 种 行为 流程 。 


训 览 器 能 否 使 
用 Service 
Worker? 


浏览 器 如 第 浏览 器 注册 
继续 进行 Service Worker 


图 9-3 ”Service Worker 的 安装 过 程 。 代 人 码 检查 Service Worker 的 支持 状态 。 如 
果 浏 览 器 支持 它 ， 则 安装 Service Worker， 和 否则 什么 都 不 做 

安装 Service Worker 的 第 一 部 分 是 通过 sw-installjs 脚本 注册 它 , 这 涉及 在 每 个 页 面 代 码 底部 
的 <script> 标 签 中 引用 这 个 脚本 。 


9.2.2 ”注册 Service Worker 


要 开始 安装 Service Worker ， 需 要 htdocs 文件 夹 中 名 为 sw-installjs 的 文件 。 在 文本 编辑 器 中 
打开 此 文件 ， 并 在 其 中 输入 代码 清单 9-1。 


代码 清单 9-1 检测 Service Worker 的 支持 情况 及 安装 代码 
if("serviceWorker" in navigator)f{ 
navigator.serviceWorker.register("/sw.js"); 


} 


检测 Service Worker 的 支持 情况 很 容易 。 第 一 行使 用 in 运算 符 检查 navigator 对 象 中 是 否 
存在 serviceWorker 对 象 . 如 果 支 持 Service Worker , 则 通过 serviceWorker 对 象 的 register 
方法 注册 /swjs 中 的 脚本 ， 如 第 二 行 所 示 。 
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关于 Service Worker 
为 什么 Service Worker 代码 不 在 js 目录 中 ? 那 是 因为 作用 域 的 问题 。 在 默认 情况 下 ,Service 
Worker 线程 仅 在 其 所 在 的 目录 及 其 子 目 录 中 工作 。 如 果 你 想 让 它 在 整个 网 站 上 工作 ， 需 要 将 


其 放 入 网 站 的 根 目 录 ， 正 如 你 在 本 章 的 例子 中 所 做 的 那样 。 如 果 要 将 Service Worker 放 在 更 符 
合 逻 辑 的 位 置 ， 可 以 通过 将 Service-Worker-Allowed 的 HTTP 响应 头 设 置 为 / 值 来 解决 此 
问题 ， 该 值 允 许 Service Worker 在 整个 域 中 工作 。 


现在 还 不 能 重新 加 载 页 面 并 测试 你 的 更 改 ! 为 了 让 Service Worker 充分 发 挥 作 用 ， 需 要 编写 
一 些 Service Worker 行 为， 特别 是 在 首次 安装 Service Worker 时 应 该 发 生 的 行为 。 


1. 编写 Service Worker 的 install 事件 

如 前 所 述 ，Service Worker 接口 是 轻 量 级 的 , 由 事件 组 成 , 可 以 使 用 addEventListener 方 
法 通过 代码 监听 这 些 事件 。 首 次 安装 Service Worker 时 ， 将 触发 install 事件 。 

安装 第 一 个 Service Worker 时 , 需要 立即 缓存 网 站 的 全 局 资源 , 包括 网 站 的 CSS、JavaScript、 
图 像 以 及 其 他 在 所 有 页 面 和 设备 中 常见 的 资源 。 图 9-4 展现 了 这 个 缓存 过 程 。 


在 页 面 上 安装 触发 Service Worker 


Service Worker ee 


图 9-4 触发 Service Worker 的 install 事件 时 要 发 生 的 行为 


开始 编写 Service Worker 的 安装 行为 之 前 ,请 打开 htdocs 文件 夹 中 的 swjs。 首 先 要 缓存 网 站 
离线 运行 所 需 的 页 面 资 源 ， 这 通常 包括 静态 部 分 ， 如 CSS 、JavaScript 和 图 像 。 代 码 清单 9-2 显 
示 了 如 何 完 成 这 一 重要 步骤 。 
代码 清单 9-2 在 Service Worker 的 install 事件 中 绥 存 资源 
国 资源 缓存 的 版 本 标识 符 


var cacheVersion = "V1"， 
cachedAssets = [ 
"/css/global.css", 
"/js/debounce.js", 
"/js/nav.js", 
"/js/attach-nav.js", 
"/img/global/jeremy .svg", 
"/img/global/icon-github.svg", 
在 安装 Service "/img/global/icon-email.svg", 
Worker 时 会 触发 ， /img/global/icon-twitter.svg", 
"/img/global/icon-linked-in.svg" 


安装 Service Worker 时 ， 
要 缓存 的 资源 URI 


使 用 在 cacheversion 
变量 中 设置 的 标识 符 名 
| . . 称 ， 打 开 新 的 缓存 
self.addEventListener("install", function(event)t{ 
event .waitUntil(caches.open(cacheVersion) .then(function(cache)t 


return cache.addAll (cachedAssets); | eR E 
cachedRssets 


] 


}) .then (function(){ 数组 填充 缓存 
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i return self.skipwaiting(); 由 通知 Service Worker 立即 生效 


i 并 触发 activate 事件 
self.addEventListener("activate", function(event)t 在 Service Worker 的 
return self.clients.claim() skipwaiting 方法 调 
}); activate 事件 触发 时 ， Service 用 时 会 触发 
Worker 将 立即 开始 生效 


安装 代码 乍 看 有 点 环 手 ， 但 浏览 一 遍 就 很 容易 掌握 。 首 先 ， 在 cacheVersion 字符 串 中 定 
义 缓 存 标 识 符 ， 可 以 为 缓存 指定 一 个 名 称 ， 并 且 可 以 在 将 来 版 本 的 Service Worker 中 更 改 缓存 时 
对 其 进行 更 新 。 然 后， 在 cachedAssets 数组 中 指定 要 在 Service Worker 中 预先 绥 存 的 资源 。 

接 下 来 编写 install 事件 代码 ， 该 代码 会 在 sw-install.js 安装 Service Worker 后 立即 执行 。 
此 处 将 返回 一 个 promise， 即 通过 在 cacheVersion 变量 中 设置 的 标识 符 打 开 一 个 新 的 caches 
对 象 ， 然 后 将 cachedAssets 数组 中 指定 的 所 有 资源 添加 到 该 对 象 。 这 个 promise 连接 了 一 个 
then 调用 ， 后 者 返回 Service Worker 的 skipwaiting 方法 的 调用 结果 。 这 指示 Service Worker 
在 安装 事件 完成 后 立即 启动 activate 事件 。 然 后 ，activate 事件 代码 执行 Service Worker 的 
claim 方法 ,该 方法 允许 Service Worker et 

准备 好 这 些 代 码 之 后 ， 现 在 可 以 重新 加 载 页 面 。 页 面 重新 加 载 时 ,似乎 什么 都 没有 发 生 。 那 
怎么 知道 Service Worker 是 否 在 工作 呢 ? 在 ee 中 ， 你 可 以 打开 开发 者 工具 ， 并 导航 到 
Application 选项 卡 进行 验证 。 单 击 左 窗 格 中 的 Service Workers 项 ， 如 图 9-5 所 示 。 


在 页 面 重新 加 载 时 
查看 Service Worker 更 新 Service Worker 
Application Service Workers 
人 Manifest Offline 图 Update on reload Bypass for network 
I Service Workers 
曾 Clear storage 
目 9 http://localhost:8080/ 
Storage Source sw.js 


> 33 Local Storage Received 7/27/2016, 8:16:46 PM 
> BS Session Storage Staius © #3303 activated and is running stop 


品 IndexedDB 


Service Worker 信 息 停止 Service Worker 
图 9-5 ” Chrome 开发 工具 中 的 Application 选项 卡 显 示 当 前 网 站 激活 的 Service Worker。 
点 击 左 窗 格 中 的 Service Workers 项 ， 即 可 访问 此 面板 


在 Application 选项 卡 中 打开 此 面板 时 ， 能 够 查看 页 面 上 当前 运行 的 Service Worker， 以 及 执 
行 停止 、 注 销 Service Worker 等 操作 ， 更 重要 的 是 ， 在 重新 加 载 时 强制 其 更 新 。 对 于 本 章 工作 ， 
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应 选中 Update on reload 复 选 框 ， 该 复 选 框 将 强制 在 页 面 重新 加 载 时 更 新 Service Worker。 开 发 
Service Worker 时 可 能 会 遇 到 一 些 环 手 的 问题 ， 而 选中 该 选项 能 够 简化 流程 。 


2. 查看 Service Worker 缓存 
既然 已 经 验证 安装 了 Service Worker， 那 么 如 何 判断 指定 的 资源 是 否 已 缓存 呢 ? 这 个 问题 的 
答案 再 次 位 于 Application 选项 卡 中 。 在 左 侧 窗 格 中 ， 展 开 Cache Storage 项 ， 然 后 点 击 网 站 的 组 


、 Car 、 一 ey 
存 (标记 为 v1 ), 正 如 install 事件 代码 中 指定 的 那样 。 你 将 看 到 如 图 9-6 所 示 的 情况 。 
Storage # Request Response 
本 0 http://localhost:8080/css/global.css OK 
> 33 Local Storage 针 http://localhost:8080/img/global/icon-email.svg OK 
ESE Session Storage . http://localhost:8080/img/global/icon-github.svg OK 
品 IndexedDB 3 http://localhost:8080/img/global/icon-linked-in.svg OK 
入 Web sQL 4 http://localhost:8080/img/global/icon-twitter.svg OK 
去 和 条 http://localhost:8080/img/global/jeremy.svg OK 
> @ Cookies 6 http://localhost:8080/js/attach-nav.jjs OK 
x http://localhost:8080/js/debounce.js OK 
Cache 8 http://localhost:8080/js/nav.js OK 
车 Cache Storage 
E53 v1 - http://localhost:8080 
选中 的 缓存 缓存 的 资源 


图 9-6 Service Worker 创建 的 vl 缓存 。 从 中 可 以 看 到 Service Worker 的 cachedAssets 
数组 中 指定 的 所 有 资源 


查看 Application 选项 卡 中 Cache Storage 项 下 的 v1 缓存 时 ， 可 以 看 到 在 cachedAssets 数 
组 中 指定 的 所 有 项 。 缓 在 中 有 了 这 些 资 源 后 ， 离 线 会 发 生 什 么 呢 ? 要 想 离 线 ， 可 以 关闭 Wi-Fi 或 
拨 下 网 络 电缆 来 关闭 计算 机 上 的 网 络 连接 , 但 有 一 种 更 简单 的 方法 。 在 Chrome 的 开发 者 工具 中 ， 
转 到 Network 面板 ， 找 到 Offline 复 选 框 ， 如 图 9-7 所 示 。 


Preserve log Disable cache Offline | No throttling 了 


图 9-7 选择 Chrome 网 络 面板 中 的 Offline 复 选 框 ， 可 以 模拟 离线 环境 ， 
而 无 须 真 正 禁 用 网 络 连接 


选中 Offline 复 选 框 并 重新 加 载 页 面 。 你 会 注意 到 ， 尺 管 已 经 缓存 了 所 有 必要 的 页 面 资源 以 
供 离线 查看 ， 但 仍然 会 出 现 连接 错误 而 不 是 网 站 的 离线 版 本 。 为 什么 呢 ? 

在 这 个 例子 中 ， 这 是 因为 你 没有 缓存 HTML 文档 本 身 。 即 使 做 到 了 这 点 ， 仍 然 需要 一 种 拦 
截 网 络 请 求 的 机 制 ， 还 需要 知道 如 何 处 理 它们 。 不 分 青红皂白 地 将 每 一 项 资源 预先 添加 到 
CacheStorage 中 并 不 可 行 ， 因 为 它 会 大 量 加 载 用 户 可 能 最 终 不 需要 的 东西 。 首 先 在 install 
事件 中 缓存 所 有 页 面 上 通用 的 全 局 资源 ， 然 后 按 需 使 用 fetch 事件 拦截 和 缓存 资源 。 这 就 能 确 
保 访 问 者 能 够 高 效 地 缓存 他 们 需要 的 所 有 东西 。 在 他 们 发 起 请 求 后 , 即 可 通过 编程 方式 将 资源 添 
加 到 缓存 中 。 


由 
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9.2.3 ”拦截 并 缓存 网 络 请 求 


要 控制 离线 场景 ,需要 一 种 介 于 你 和 服务 器 端 之 间 的 机 制 ,该 机 制 允许 你 缓存 内 容 以 离线 查 
看 。fetcn 事件 就 允许 通过 图 9-8 中 定义 的 行为 流 实现 这 种 功能 。 


用 户 发 起 资源 请 求 


Service Worker 


从 缓存 中 提供 资源 


检索 资源 ，Service Worker 
将 资源 在 和 人 缓存 


图 9-8 Service Worker 的 fetch 事件 的 行为 。 用 户 对 资源 发 出 请 求 ，Service Worker 
介入 以 拦截 该 资源 ， 并 查看 该 资源 是 否 已 经 在 缓存 中 。 如 果 资 源 不 在 缓存 中 ， 
则 从 网 络 获取 资源 ， 并 由 Service Worker 缓存 ， 反 之 则 从 缓存 提取 


你 可 能 想 知道 ， 为 什么 要 在 install 事件 期 间 操心 资源 的 缓存 。 这 是 因为 你 可 以 为 事先 知 
道 确定 需要 的 资源 提前 启动 缓存 。 但 是 无 论 是 否 缓存 了 资源 ,你 仍然 需要 为 处 理 用 户 请 求 并 缓存 
资源 供 以 后 使 用 的 fetch 事件 定义 行为 。 对 于 预先 缓存 的 资源 ，Service Worker 将 从 缓存 中 提供 
它们 。 对 于 不 太 确 定 的 资源 ， 例 如 HTML 文档 、 特 定 于 文章 的 图 像 、 字 体 等 ， 需 要 更 谨慎 地 检 
查 : 从 网 络 中 获取 它们 ， 然 后 将 其 放 人 缓存 供 以 后 使 用 。 

这 样 做 的 一 个 正当 理由 是 , 你 请 求 的 资源 可 能 在 所 有 设备 上 不 一 致 , 因此 不 应 该 预先 添加 到 
缓存 。 具 有 高 密度 显示 器 的 设备 将 下 载 适 合 该 设备 的 图 像 ， 并 根据 设备 的 需要 以 编程 方式 缓存 。 
而 能 力 较 低 的 设备 ， 应 下 载 并 缓存 适合 其 自身 限制 的 资源 。 

你 需要 编写 自己 的 逻辑 来 实现 这 个 目标 。 这 个 逻辑 如 代码 清单 9-3 所 示 ， 将 其 添加 到 swjs 
的 本 地 副本 。 


代码 清单 9-3 在 fetch 事件 中 拦截 和 缓存 其 他 资源 


阻止 符合 这 个 正则 表达 式 的 资 fetch 事件 监听 器 ， 拦截 主机 名 符合 

源 存储 到 Service Worker 缓存 可 以 拦截 网 络 请 求 这 个 正则 表达 趟 

self.addEventListener("fetch", function(event)t{ a Sr 
月 


var allowedHosts = 
/(localhost|lfonts\.googleapis\.com|lfonts\.gstatic\.com)/i, 
deniedAssets = /(sw\.js|lsw-install\.js)$/i; 


if(allowedHosts.test (event.request .url) === true && 使 用 event 对 象 的 
deniedAssets.test(event.request.url) === false){ respondWith 方法 

event .respondWith ( 拦截 请 求 。 绕 过 这 个 

在 响应 请 求 之 前 ， 请 检查 请 求 URL 是 否 来 自 方法 就 会 发 生 默认 


接受 的 主机 , 并 且 不 属于 黑 名单 中 的 资源 之 一 浏览 器 行为 
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如 果 内 容 不 存在 于 如 果 内 容 存在 于 Service Worker 检查 请 求 内 容 是 否 存在 于 
Service Worker 缓 缓存 中 ， 则 提供 缓存 的 响应 Service Worker 缓存 中 
存 中 , 则 使 用 fetch caches.match(event.request) .then (function(cacheqResponse){ 

API 获取 return cachedResponse || 


fetch(event.request) .then (function(fetchedqResponse) { 
caches .open (cacheVersion) .then(function(cache)t{ 
cache.put (event .fedcuest，ftetcheqResponse.clone() ); 
获取 资源 后 ， 使 用 


cacheVersion 标 


将 获取 到 的 资源 
识 符 打 开 Service 将 获取 到 的 资源 放 


2 return fetchedResponse; < 一 入 Service Worker 
媒 区 
Worker 缓存 )) ， 缓存 
}) 
好 缓存 响应 完成 后 ， 
} 返回 原始 响应 


sy 


通过 这 段 代 码 ， 可 以 从 缓存 中 获取 已 在 Service Worker 的 install 事件 代码 中 准备 好 的 资 
源 。 如 果 遇 到 不 在 缓存 中 的 资源 请 求 ， 可 以 使 用 fetch 方法 (第 8 章 ) 从 网 络 中 检索 。 下 载 资 
源 后， 将 其 放置 在 Service Worker 中 。 后 续 的 请 求 将 从 缓存 中 ( 而 不 是 从 网 络 ) 检索 资源 。 使 用 


Ctrl+Shift+R (或 Mac 上 的 Cmd+Shift+R ) 强制 重新 加 载 页 面 ， 所 做 的 更 改 即 可 生效 。 


提示 : 关于 顽固 的 Service Worker 
即使 在 Chrome 开发 者 工具 的 Application 选项 卡 中 选中 了 Update on reload 复 选 框 ,Service 
Worker 也 可 能 无 法 更 新 。 这 可 能 是 由 于 缓存 策略 未 能 认真 指示 浏览 器 将 Service Worker 进程 保 
存在 缓存 中 。 示 例 中 ， 你 有 一 个 cache-Ccontrol 的 头 部 ， 其 值 为 no-cache， 它 指示 浏览 器 
在 服务 器 上 重新 验证 存储 的 副本 以 进行 更 改 。 要 了 解 有 关 Cache-Control 及 其 工作 原理 的 更 
多 信息 ， 请 参阅 第 10 章 。 


更 新 后 的 Service Worker 进程 运行 时 ， 打 开 Network 选项 卡 ， 并 检查 Size 列 中 的 资源 信息 。 
那些 被 Service Worker 截获 的 内 容 将 被 读 取 ( 显示 为 ffom ServiceWorker ), 如 图 9-9 所 示 。 


Name Method Status Domain Size 

| localhost GET 200 localhost (from ServiceWorker) 
_ | css?family=Fjord+OnelMontserrat:4... GET 200 fonts.googleapis.com/ _ (from ServiceWorker) 
| global.css GET 200 localhost (from ServiceWorker) 


被 Service Worker 
拦截 的 请 求 


图 9-9 Service Worker 拦截 的 网 络 请 求 将 由 Chrome 的 网 络 实用 程序 的 Size 列 中 的 
“(from servicework)” 值 指示 


我 们 已 经 验证 了 Service Worker 通过 cacheStorage API 绥 存 的 内 容 ， 请 在 网 络 节 流 下 拉 列 
表 旁 边 的 网 络 实用 程序 中 选中 Offline 复 选 框 ， 然 后 重新 加 载 该 页 面 。 注 意 ， 该 站 点 现在 可 以 离 
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线 使 用 ， 你 不 会 接收 到 网 络 错误 提示 。 祝 贺 你 ! 你 刚刚 完成 了 第 一 次 离线 网 络 体验 ! 下 面 看 看 这 
些 更 改 是 如 何 影 响 页 面 性 能 的 。 


9.2.4 衡量 性 能 收益 
从 Service Worker 绥 存 检索 资源 时 ， 可 以 获得 比 浏览 器 缓存 更 好 的 性 能 。 这 意味 着 可 以 通过 
降低 浏览 器 开始 绘制 页 面 所 需 的 时 间 ， 进 一 步 提 高 用 户 的 演 染 性 能 。 图 9-10 跟踪 了 三 个 场景 


首次 绘制 的 时 间 ， 包 括 浏览 器 的 缓存 中 没有 任何 内 容 时 、 填 充 缓存 时 、 使 用 Service Worker 缓存 
而 不 是 浏览 器 缓 存 时 。 


各 种 缓存 方案 的 首次 

绘制 所 需 的 时 间 

(数值 越 低 越 好 ) 
250ms 厂 
200 ms 上 
150 ms 上 
100 ms 上 
S0 ms rc 

0 ms ! ! 


未 缓存 浏览 器 缓存 Service Worker 


图 9-10 在 Chrome 的 Regular 3G 节 流 配置 上 ， 比 较 各 种 缓存 方案 的 首次 绘制 所 需 的 
时 间 。 场景 包括 未 缓存 的 页 面 、 从 浏览 器 缓存 检索 到 的 页 面 ,以 及 从 Service 
Worker 缓存 检索 到 的 页 面 


结果 让 我 有 些 吃惊 ,但 数据 显示 ， 使 用 Service Worker 提高 性 能 时 ， 浏览 器 的 缓存 行为 提高 
了 50%。 泻 染 时 间 大 大 缩短 了 ! 

这 并 不 意味 着 浏览 器 缓存 已 经 失效 。 你 还 需要 它 ， 因 为 它 的 兼容 性 很 好 ， 你 可 以 在 不 支持 
Service Worker 的 浏览 器 中 使 用 。 即 使 在 支持 Service Worker 的 浏览 器 中 ， 你 也 可 以 将 fetch 事 
件 代 码 配 置 为 “忽略 不 想 拦截 的 请 求 "， 此 时 请 求 就 将 落 入 浏览 器 缓存 。 

下 面 再 次 查看 Service Worker 代码 ， 了 解 如 何 使 其 更 加 灵活 。 


9.2.5 ”优化 网 络 请 求 的 拦截 行为 
我 们 完成 了 第 一 个 Service Worker， 它 工作 得 很 好 。 但 美中不足 : 如 果 你 试图 更 改 任何 资源 ， 
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除非 强制 重新 加 载 整个 页 面 ， 否 则 将 看 不 到 这 些 修 改 。 这 是 有 问题 的 。 尤 其 重要 的 是 ， 网 站 的 
HTML 必须 尽 可 能 是 最 新 的 ， 这样 ， 如 果 你 更 新 对 CSS 或 JavaScript 之 类 的 内 容 引 用 ， 才 能 够 看 
到 这 些 更 改 以 及 对 内 容 的 更 新 。 

这 并 不 是 说 Service Worker 天 生 就 有 问题 , 也 不 是 说 使 用 cachestorage 代替 浏览 器 缓存 是 
个 坏 主意 。 如 果 想 提供 离线 体验 ， 这 是 唯一 真正 的 方法 。 但 是 ， 当 你 拦截 并 更 改 网 络 请 求 的 实现 
方式 时 , 你 正在 编写 取代 浏览 器 自身 内 置 缓存 的 行为 。 必 须 注 意 如 何 选 择 合适 的 策略 来 满足 这 些 
要 求 。 

如 何 满足 这 些 要 求 取决 于 网 站 的 性 质 。 本章 的 博客 示例 采取 了 基础 策略 : 资源 不 会 经 常 更 改 
(如 图 像 、 脚 本 和 CSS ), 你 现在 不 必 担 心 。 确 实 需 要 更 改 它们 时 ,可 以 使 用 下 一 节 将 介绍 的 一 种 
实现 机 制 。 

对 于 HTML 来 说 ， 你 在 Service Worker 的 fetch 事件 代码 中 采用 了 不 同 的 策略 ， 这 将 允许 
你 在 每 次 联网 时 获取 最 新 的 页 面 内 容 。 而 作为 回 退 策略 的 一 部 分 , 你 仍然 可 以 为 用 户 提供 离线 查 
看 功能 。 

当前 Service Worker 的 fetch 事件 代码 很 简单 : 如 果 对 资源 的 请 求 与 Service Worker 缓存 中 
已 存在 的 内 容 匹配 , 则 从 缓存 提供 资源 ; 如 果 请 求 与 缓存 中 的 任何 内 容 都 不 匹配 ， 则 从 网 络 中 获 
取 最 新 副本 ， 然 后 将 其 添加 到 缓存 。 

这 是 一 个 很 好 的 性 能 策略 , 但 它 会 对 内 容 的 新 鲜 度 产生 负面 影响 。 我 们 不 想 完 全 放弃 这 种 策 
略 ， 因 为 有 些 资 源 几乎 没有 改变 。 我 们 希望 对 HTML 文档 采用 一 种 新 的 方法 。 如 图 9-11 所 示 ， 
在 Service Worker 的 fetch 事件 中 采用 双管齐下 的 方法 拦截 网 络 请 求 。 


用 户 发 起 网 络 请 求 


总 是 从 缓存 中 提供 ， 如 果 
缓存 不 存在 则 请 求 网 络 
图 9-11 在 Service Worker 的 fetch 事件 中 ， 双 管 齐 下 截获 网 络 请 求 的 方法 。 如 果 请 
求 的 资源 是 一 个 HTML 文档 ， 则 总 是 从 网 络 中 获取 并 将 其 放置 在 缓存 中 ， 并 
且 只 有 在 离线 时 才 从 Service Worker 缓存 提供 资源 。 如 果 资 源 不 是 HTML 文 
档 ， 则 始终 从 缓存 提供 ; 如 果 资 源 不 在 Service Worker 缓存 中 ， 则 从 网 络 检索 


通过 这 个 流程 ， 我 们 可 以 保持 Service Worker 为 图 像 、CSS 和 JavaScript 等 资源 提供 的 性 能 
优势 ， 同 时 优先 考虑 HTML 内 容 的 新 鲜 度 。 这 使 你 能 够 通过 更 改 URL 更 新 网 站 资源 ， 稍 后 可 以 


总 是 从 网 络 获取 ， 并 缓存 
以 供 离线 使 用 
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在 填充 Service Worker 的 install 事件 代码 中 ， 把 缓存 指向 这 些 URL。 
要 实现 这 个 新 流程 ,需要 更 新 Service Worker 的 fetch 事件 代码 。 首先, 需要 添加 一 个 新 的 
正则 表达 式 ， 检 查 传人 的 请 求 是 否 是 HTML 文档 。 修 改 的 内 容 在 代码 清单 9-4 中 以 粗 体 显示 。 


代码 清单 9-4 添加 正则 表达 式 以 检查 HTML 请求 
Var allowedHosts = /(localhost|fonts\.googleapis\.com|lfonts\.gstatic\.com)/i, 
deniedAssets /(sw\.jslsw-install\.js)$/i, 


htmlDocument = /(\/|\.html)s$/i; "| 检查 URL 是 否 是 HTML 文档 
的 正则 表达 式 


稍 后 使 用 这 个 正则 表达 式 检查 请 求 URL 是 否 用 于 HTML 文档 ， 你 将 依赖 它 决定 网 络 如 何 拦 
截 请 求 行为 。 从 这 里 开始 ,你 将 使 用 此 正则 表达 式 创 建 一 个 新 条 件 。 如 果 正 则 表达 式 测 试 通过 了 
当前 请 求 ， 说 明 你 正在 处 理 一 个 HTML 文档 ,那么 将 以 “网 络 优先 /离线 时 从 缓存 提供 服务 ” 模 
式 处 理 该 请 求 。 如 果 正 则 表达 式 测试 失败 ， 将 使 用 “缓存 优先 /从 网 络 填充 缓存 ”的 初始 模式 。 


代码 清单 9-5 使用“ 网络 优先 /离线 时 从 缓存 提供 服务 ”模式 处 理 HTML 请 求 


使 用 event . 检查 当前 请 求 是 否 
是 HTML 文档 


respondWwith 
拦截 请 求 , 并 使 
用 封装 的 代码 
进行 响应 


if(lallowedHosts.test (event.request.url) = rue && 
deniedAssets.test (event .request .url) = false){ 
IE (htmlDocument .test (event.request.url) === true) 1 
evVent .esSponadWithn ( 
fetch(event.request) .then(function(zesponse) 1{ 
caches .open(cacheVersion) .then(function(cache)f{ 
打开 缓存 并 放 入 | cache.put (event .request, response.clone()); 


t 


网 络 响 应 ， 以 供 }); 马上 从 网 络 请 求 
后 续 离线 使 用 HTML 文档 
一 > return response; 


使 用 从 网 络 检 索 到 的 }) .catch(function(){ 
资源 进行 响应 return caches .match(event .reGquest ) 


} 
如 果 后 续 的 请 求 失败 ， 从 缓存 


下 提供 获得 的 最 后 一 个 版 本 
elLSset 
/* 像 以 前 一 样 处 理 非 HTML 请 求 **/ 
} 其 他 资源 按 先前 的 
} 定义 处 理 
重新 加 载 页 面 并 尝试 新 代码 后 ， 继 续 修改 index.html。 你 将 注意 到 ， 它 的 更 新 会 立即 反映 
出 来 。 
与 先前 的 fetch 事件 代码 相 比 ， 这 个 方法 稍微 降低 了 页 面 的 泻 染 性 能 ， 因 为 文档 需要 从 网 
络 获取 ， 而 不 是 从 Service Worker 缓存 读 取 。 在 Chrome 中 的 Regular 3G 节 流 配置 下 的 测试 显示 ， 
首次 绘制 的 平均 时 间 是 120 毫秒 ,虽然 这 比 之 前 的 Service Worker 代码 产生 的 90 毫秒 的 平均 时 间 
慢 ， 但 它 仍 然 快 于 浏览 器 缓存 大 约 为 175 毫秒 的 首次 绘制 平均 时 间 。 
你 得 到 的 结果 将 取决 于 具体 的 项 目 。 请 记 住 , 你 不 需要 也 不 应 该 拦截 每 个 网 络 请 求 。 要 记得 ， 
只 有 将 响应 对 象 传递 给 event 对 象 的 respongdwith 方法 时 ， 才 能 截获 fetch 事件 代码 中 的 网 
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络 请 求 。 如 果 请 求 未 传递 给 此 方法 ,浏览 器 的 默认 行为 将 启动 。Service Worker 规范 没有 预先 描 
述 任何 处 理 请 求 的 方法 ， 它 只 提供 了 一 个 接口 供 这 样 操作 。 可 以 指定 是 和 否 拦截 请 求 的 逻辑 。 在 本 
章 示 例 中 ， 你 已 经 通过 创建 正则 表达 式 过 滤 不 想 拦 截 的 请 求 ， 完 成 了 相当 多 的 工作 。 


Service Worker 和 CDN 托管 资源 
CDN 托管 资源 是 请 求 拦截 的 另 一 个 方面 ， 使 用 cacheStorage 缓存 它们 也 是 如 此 。 一 般 
来 说 ， 你 能 够 轻松 地 将 CDN 托管 资源 保存 到 Service Worker 缓存 。CDN 主机 将 其 服务 器 配置 
为 使 用 Access-Control-Allow-Origin: * 头 部 提供 资源 ， 它 允许 任何 来 源 无 限制 地 访问 
这 些 资源 。 如 果 无 法 缓存 CDN 资源 ， 请 检查 此 头 部 是 否 存 在 。 所 有 正确 配置 的 CDN 都 提供 
了 这 个 头 部 , 因此, 在 Service Worker 中 添加 特殊 逻辑 以 处 理 这 些 资源 不 是 你 需要 担心 的 事情 。 
有 关 CDN 及 其 工作 方式 的 更 多 信息 ， 请 参阅 第 10 章 。 


下 面 回 到 我 们 的 Service Worker。 尽 管 你 因为 通过 网 络 获取 HTML 请 求 牺牲 了 一 些 性 能 ， 但 
总 的 来 说 还 是 比 通过 浏览 器 缓存 时 性 能 要 好 。 更 棒 的 是 , 这 种 方法 仍然 允许 你 在 用 户 离线 时 向 他 
们 提供 内 容 ， 两 全 其 美 。 

当然 , 如 果 修 改 站 点 的 CSS、JavaScript 或 图 像 , 这 些 内 容 仍 将 从 Service Worker 缓存 中 提供 ， 
并 且 不 会 反映 更 新 。 有 一 个 很 好 的 方法 可 以 处 理 这 些 资源 , 接 下 来 将 介绍 如 何 更 新 Service Worker 
缓存 ， 以 引入 对 站 点 资源 的 更 改 。 


9.3 更 新 Service Worker 


我 们 编写 的 Service Worker 可 以 缓存 网 站 资源 ， 比 如 CSS、JavaScript 和 图 像 ， 并且 总 是 从 服 
务 硕 获取 HTML 文件 的 新 副本 ,想象 一 下 ,你 已 经 将 这 个 Service Worker 代码 推送 到 生产 环境 中 ， 
它 工 作 得 很 好 。 

不 幸 的 是 ， 你 遇 到 了 一 个 障碍 : 你 需要 确保 用 户 看 到 新 的 CSS， 但 由 Service Worker 缓存 的 
旧 CSS 文件 是 持久 化 的 ， 只 有 强制 重新 加 载 整 个 页 面 才 会 更 新 。 这 是 有 问题 的 ， 因 为 告诉 用 户 
“强制 重新 加 载 页 面 以 查看 新 样式 ! ”不 是 一 个 好 的 解决 方案 。 你 需要 能 够 引 和 更改 的 CSS， 并 自 
动 将 其 放 入 用 户 的 Service Worker 缓存 。 

本 节 将 学 习 如 何在 网 站 上 进行 文件 版 本 控制 ， 以 便 Service Worker 选择 文件 。 考 虑 到 用 户 设 
备 缓存 配额 有 限 ， 你 想 要 保持 缓存 简洁 ， 所 以 我 还 会 告诉 你 如 何 清理 旧 的 缓存 。 让 我 们 开始 吧 ! 


9.3.1 文件 版 本 控制 


回想 一 下 ， 你 编写 过 Service Worker fetch 事件 代码 ， 以 便 始终 从 Service Worker 缓存 提供 
CSS、JavaScript 和 图 像 等 文件 ， 但 如 果 用 户 处 于 在 线 状 态 ， 则 要 从 网 络 获取 HTML。 这 样 做 的 
一 个 很 好 的 理由 是 ， 你 可 以 通过 在 HTML 文件 中 对 其 他 资源 类 型 的 引用 进行 版 本 控制 ， 以 强制 
更 新 这 些 资 源 。 因 为 HTML 总 是 从 服务 器 获取 ， 所 以 可 以 确保 用 户 下 载 对 资源 的 任何 新 引用 。 
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关于 缓存 ， 获 取 一 个 文件 并 修改 对 它 的 引用 时 ， 就 会 进行 版 本 控制 以 globaless 为 例 ， 它 
通过 <1ink> 标 签 包 含 在 index.html 中 : 


<link rel="stylesheet" href="/css/global.css" type="text/css"> 


你 已 经 熟悉 这 种 语法 了 。 这 行 代码 指示 浏览 器 下 载 global.css。 但 是 ， 如 果 对 global.css 进行 
更 改 ， 会 发 生 什么 ? 你 的 Service Worker 永远 不 会 理会 ， 因 为 它 已 经 被 缓存 了 。 事 实 上， 根据 该 
文件 的 缓存 策略 ， 即 使 是 原生 浏览 器 缓存 也 可 能 永远 不 会 获取 新 的 修改 。 

此 时 需要 引入 版 本 控制 的 概念 。 将 查询 字符 串 添加 到 文件 名 ( 粗 体 显 示 )， 即 可 将 资源 与 其 
以 前 的 版 本 区 分 开 来 : 


<link rel="stylesheet" href="/css/global.css?v=1" type="text/css"> 


即使 资源 的 文件 名 相同 , 查询 字符 串 的 差异 也 足以 使 浏览 器 触发 其 再 次 下 载 文件 , 并 与 没有 
查询 字符 串 的 资源 区 别 对 待 。 


浏览 器 缓存 中 的 查询 字符 串 
查询 字符 串 技巧 不 仅 在 党 试 破坏 Service Worker 缓存 时 很 有 用 ， 还 适用 于 浏览 器 的 本 地 组 
存 。 第 10 章 更 深入 地 介绍 了 这 个 技巧 ， 并 自动 化 了 这 个 过 程 ， 使 重复 更 改 不 再 那么 乏味 。 


为 了 验证 这 一 点 ， 可 以 在 global.css 中 做 一 个 小 而 明显 的 改变 ， 比 如 改变 <body> 元 素 的 背景 
色 。 打 开 index.html， 给 <1ink> 标 签 对 global.css 的 引用 添加 上 述 查 询 字符 串 ， 新 样式 会 立即 生 
效 。 大 功 告 成 了 ! 如 果 你 这 么 想 ， 也 许 你 应 该 看 看 Chrome 开发 者 工具 中 Application 选项 卡 下 
Cache Storage 的 v1 cache 部 分 ， 如 图 9-12 所 示 。 


Request 

http://localhost:8080/ 
http://localhost:8080/css/global.css 
http://localhost:8080/css/global.css?v=1 
http://localhost:8080/img/global/icon-email.svg 
http://localhost:8080/img/global/icon-github.svg 


图 9-12 更 新 样式 表 引 用 后 的 孤立 缓存 项 。global .css?v=1 在 缓存 中 ， 而 未 使 用 的 
globalcss 条 目 仍 然 存 在 


尽管 将 这 个 孤立 的 条 目 留 在 缓存 中 不 会 破坏 任何 人 的 用 户 体验 , 但 忽略 它 并 继续 前 进 并 不 是 
一 个 好 主意 。 不 妨 将 其 想象 成 乱 扔 垃圾 。 将 一 张 糖 纸 扔 在 地 上 会 杀 死 全 世界 吗 ? 显然 不 会 , 但 这 
是 件 坏事 ， 你 应 该 自己 清理 干净 。 
巴 这 些 孤 立 的 缓存 条 目 想 象 成 高 速 公 路 旁 的 糖 纸 和 瓶子 。 随 着 时 间 的 推移 ，Service Worker 
缓存 将 变 得 腑 肿 , 并 占用 用 户 设 备 上 不 必要 的 空间 。 下 一 节 将 学 习 如 何 像 一 个 正派 的 人 一 样 打 理 
自己 。 


折 立 缓存 项 一 


性 oh 一口 | 间 


at 
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9.3.2 ”清理 | 旧 缓 存 


我 们 已 经 了 解 了 如 何 绕 过 项 固 的 Service Worker 缓存 ， 现 在 需要 学 习 如 何 从 中 删除 过 时 的 组 
存 , 首 先 需 要 将 cacheVersion 变量 从 vl 提升 到 v2 ,和 cachedAssets 数 组 中 ,将 对 global.css 
的 引用 替换 成 读 取 global .css?v=1。 这 些 变 化 在 代码 清单 9-6 中 以 粗 体 显 示 。 


代码 清单 9-6 ”更 新 缓存 名 称 和 要 缓存 的 资源 


var cacheVersion = "v2", < 新 的 缓存 名 称 
cachedAssets = [ 
"/css/global .css?v=1", 将 引用 修改 为 新 
"/js/debounce.js", 的 CSS 文 件 


VIS iav je 
"/js/attach-nav.js", 
"/img/global/jeremy .svg", 
"/img/global/icon-github.svg", 
"/img/global/icon-email.svg", 
"/img/global/icon-twitter.svg", 
"/img/global/icon-linked-in.svg" 
] 四 


仅 这 些 更 改 就 足以 使 新 缓存 生效 , 但 不 足以 删除 旧 的 v1 缓存 。 可 以 通过 重 写 整个 activate 
事件 代码 处 理 这 个 问题 ， 如 代码 清单 9-7 所 示 。 


代码 清单 9-7 在 activate 事件 中 移 除 旧 缓存 


要 保留 的 缓存 的 
这 个 promise 会 | self.aaqqEventListener("activate"，function(event){ 白 名 单 


访问 所 有 可 用 的 var cacheWhitelist = ["v2"]; 
Service Worker 
缓存 event .waitUntill( 在 keyList 数组 中 
caches.keys() .then(function(keyList)t{ | 遍历 缓存 的 名 称 
这 个 return Promise.all([ 
生地 2 keyList.map (function(key)t 
会 等 待 多 i 示 if(cacheWhitelist.indexOf (key) === -1){ 
件 的 实现 return caches.delete(key); 
如 果 缓 存 键 不 在 白 检查 当前 的 组 
名 单 中 ， 则 删除 它 }), self.clients.claim() 存 键 是 否 在 白 
}) me 允许 Service Worker 名 单 中 
立即 在 页 面 上 生效 


}); 


使 用 这 段 新 的 activate 事件 代码 后 ， 你 的 Service Worker 将 处 理 新 缓存 中 的 所 有 内 容 。 如 
果 Service Worker 中 的 任何 缓存 不 使 用 cachewhitelist 变量 中 指定 的 任何 名 称 ， 则 它们 将 被 
删除 。 运 行 此 代码 后 ， 转 到 Chrome 开发 者 工具 中 Application 选项 卡 左 侧 窗 格 中 的 Cache Storage 
部 分 。 你 应 该 能 够 看 到 唯一 剩 下 的 缓存 是 新 的 v2 缓存 ， 如 图 9-13 所 示 。 
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Cache 


号 Cache Storage 
22 v2 - http://localhost:8080 
32 Application Cache 


图 9-13 新 的 v2 缓存。 点击 后 能 够 看 到 更 新 的 缓存 内 容 ， 尤 其 是 global .css?v=1 条 目 


我 们 已 经 将 对 global.css 的 每 个 引用 更 新 为 global .css?v=1。 如 果 不 这 样 做 ， 导 航 到 后 续 
页 面 时 ， 将 为 旧 URI 存储 单独 的 缓存 条 目 。 这 不 是 本 章 工作 的 一 部 分 ， 而 是 在 你 自己 的 网 站 上 
实现 Service Worker 更 改 时 需要 注意 的 一 个 步 又 。 
本 章 工 作 到 此 为 止 。 进 入 下 一 章 之 前 ， 让 我 们 快速 回顾 一 下 本 章 所 学 的 知识 。 


进一步 了 解 Service Worker 
本 章 以 性 能 为 导向 ， 所 以 无 法 涵盖 Service Worker 的 所 有 功能 。 事 实 上 ，Service Worker 
的 作用 不 仅仅 是 创造 离线 体验 和 提升 网 站 性 能 。 尽管 本 章 中 的 模式 对 于 内 容 驱 动 的 网 站 ( 如 博 
客 等 ) 很 有 用 ， 但 一 些 资源 可 以 帮助 你 进一步 了 解 Service Worker。 
口 Jake Archibald 是 拥护 Google 的 开发 者 ,他 写 了 一 篇 很 棒 的 文章 “The Offline Cookbook”。 
其 中 的 模式 可 以 在 Service Worker 中 使 用 。 有 些 模 式 是 面向 性 能 的 ， 有 些 模式 能 够 提升 
离线 体验 的 灵活 性 , 还 有 一 些 模式 介 于 两 者 之 间 。 如 果 想 知道 如 何 开始 写 一 个 对 你 的 网 
站 最 有 意义 的 Service Worker， 这 是 一 个 很 好 的 起 点 。 

口 Mozilla 创建 了 自己 的 Service Worker Cookbook, 涵盖 了 各 种 可 能 性 , 包括 如 何 使 用 Service 
Worker 向 移动 设备 发 送 推送 通知 。( 你 没 看 错 ! ) 

本 章 大 量 使 用 了 CacheStorage 对 象 ,特别 是 caches .match 和 caches .open 等 方法 ， 
它们 分 别 按 名 称 匹 配 本 地 缓存 并 打开 缓存 中 的 项 。 尽 管 它 在 Service Worker 中 工作 得 很 好 ， 但 
这 个 API 是 一 个 独立 的 功能 ， 它 有 许多 方法 可 用 。 要 了 解 有 关 Cachestorage 的 更 多 信息 ， 
请 访问 Mozilla Developer Network。 

9.1 节 中 提 过 ， 除 非 使 用 postMessage API， 否 则 Service Worker 无 法 与 其 父 页 面 进行 通 
信 。 可 以 在 Google Chrome 的 GitHub 网 站 上 了 解 这 项 技术 。 


9.4 小 结 


如 前 所 述 ，Service Worker 可 以 作为 提高 网 站 性 能 的 工具 。 本 章 我 们 学 习 了 以 下 关键 概念 。 

口 Service Worker 是 一 种 JavaScript Worker， 它 在 一 个 独立 的 线程 上 运行 ， 与 发 生 在 主 处 理 

线程 上 的 所 有 其 他 脚本 活动 分 离 。 

口 在 文 持 Service Worker 的 浏览 器 中 安装 它 很 容易 。 可 以 在 navigator 对 象 中 检查 
serviceWorker 成 员 。 如 果 浏 览 器 不 支持 该 技术 ， 则 页 面体 验 会 继续 ， 而 无 须 Service 
Worker 功能 。 
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口 由 于 渐进 增强 是 为 所 有 用 户 提 供 一 定 程 度 的 功能 性 所 必需 的 ， 因 此 网 站 不 明确 依赖 于 
Service Worker 就 显得 尤为 重要 。Service Worker 仅仅 是 一 种 增强 ， 而 不 应 该 是 网 站 工作 的 
需求 。 

口 Service Worker 要 求 使 用 HTTPS。 尽管 在 开发 过 程 中 可 以 在 本 地 主机 上 通过 HTTP 开发 和 
使 用 Service Worker， 但 将 Service Worker 推送 到 生产 服务 器 时 ， 请 确保 具有 有 效 的 SSL 
证 书 。 

口 将 cacheStorage 与 Service Worker 的 fetch 事件 配合 使 用 ， 拦 截 和 缓存 网 络 请 求 时 ， 
你 就 拥有 了 巨大 的 能 力 和 灵活 性 。 组 合 这 两 个 功能 ， 就 可 以 通过 直接 从 Service Worker 
缓存 中 提供 项 目 来 提升 页 面 性 能 ， 并 在 用 户 的 网 络 连 接 不 存在 或 连接 不 畅 时 回 退 到 离线 


体验 。 

口 Service Worker 可 以 提升 泻 染 性 能 。 以 我 的 博客 为 例 ， 相 比 于 浏览 需 缓 存 ， 它 将 泻 染 速度 
提升 了 近 50%! 

口 HTML 文档 的 激进 缓存 可 能 导致 很 难 更 新 页 面 上 的 HTML 内 容 和 页 面 上 引用 的 资源 ( 如 


CSS、JavaScript 文件 和 图 像 )。 对 于 内 容 驱 动 的 网 站 〈 如 博客 ) 来 说 ， 从 网 络 中 获取 这 些 
资源 并 缓存 以 防 用 户 稍 后 离线 使 用 ， 这 种 做 法 更 有 意义 。 

口 有 时 网 站 资源 会 发 生 更 改 ， 你 需要 使 Service Worker 缓存 失效 。 如 果 发 生 这 种 情况 ， 可 以 
重新 命名 缓存 并 将 其 放 和 人 白 名 单 ， 以 使 Service Worker 缓存 失效 。 然 后 可 以 使 用 Service 
Worker 的 activate 事件 ， 删 除 不 在 白 名 单 中 的 所 有 缓存 ， 确 保 网 站 的 资源 更 改 时 易于 
更 新 和 清理 。 

下 一 章 将 探索 可 用 于 微调 网 站 资源 传输 的 方法 , 包括 配置 网 站 的 浏览 器 缓存 策略 、 提 供 资 源 

提示 、 使 用 CDN 等 。 


微调 资源 传输 


本 章 内 容 
口 了 解压 缩 的 基础 知识 、 不 良 压 缩 配 置 的 影响 ， 以 及 新 的 Brotli 压缩 算法 
口 使 用 缓存 提高 回访 用 户 的 网 站 性 能 

口 探索 CDN 托管 资源 的 好 处 

口 利用 子 资 源 完 整 性 (SRI ) 验证 CDN 资 源 的 完整 性 


我 们 已 经 花 了 很 多 时 间 讨 论 特定 于 Web 页 面 组 成 部 分 的 技术 ， 比 如 CSS、 图像 、 字 体 和 
JavaScript。 而 了 解 如 何 微调 这 些 资源 在 网 站 上 的 传输 ， 可 以 带 来 额外 的 性 能 提升 。 

本 章 将 研究 压缩 的 效果 ( 无论 好 坏 )， 以 及 一 种 新 的 Broti 压缩 算法 ， 还 将 讨论 缓存 资源 的 
重要 性 、 网 站 的 最 住 缓存 计划 ， 以 及 如 何在 更 新 内 容 或 发 布 新 代码 时 使 项 固 的 缓存 失效 。 

除了 Web 服务 器 配置 之 外 , 我们 还 将 了 解 网 站 如 何 获 益 于 使 用 托管 在 内 容 分 发 网 络 (CDN， 
地 理 位 置 分 散 的 服务 器 ) 上 的 资源 ， 如 何在 CDN 故障 的 情况 下 (尽管 这 不 太 可 能 发 生 ) 回 退 到 
本 地 托管 资源 ， 以 及 如 何 使 用 子 资源 完整 性 验证 CDN 资源 的 完整 性 。 

最 后 ,我们 将 进入 资源 提示 的 领域 。 在 浏览 器 中 ， 这 是 可 以 通过 HTML 中 的 <1ink> 标 签 或 
Link HTTP 头 部 来 使 用 的 增强 功能 。 利 用 资源 提示 ， 你 可 以 预 取 其 他 主机 的 DNS 信息 、 预 加 载 
资源 和 预演 染 整 个 页 面 。 事 不 宜 迟 ， 我 们 开始 吧 ! 


10.1 压缩 资源 


还 记得 第 1 章 展 示 过 服务 器 压缩 的 性 能 优势 吗 ? 回顾 一 下 , 服务 器 压缩 是 指 在 服务 器 将 内 容 
传输 给 用 户 之 前 , 通过 压缩 算法 处 理 内 容 。 浏 览 吉 发 送 一 个 Accept -Encoding 请 求 头 ,表明 浏 
览 絮 支持 的 压缩 算法 。 如 果 服 务 器 要 使 用 压缩 内 容 进行 回复 ， 则 Content-Encoding 响应 头 将 
间 定 用 于 对 响应 进行 编码 的 压缩 算法 ， 如 图 10-1 所 示 。 
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微调 资源 传输 


2. Web 服 务 器 发 送 


1 用 户 请 求 压缩 内 容 奈 稍 鬼 响应 


和 
一 一 一 


图 10-1 | 


GET /index.html 
Accept-Encoding: gzip, deflate 


ee 


index.html 


Content-Encoding: gzip 


户 向 服务 器 请 求 index.html， 浏 览 器 在 Accept-Encoding 中 指定 支持 的 算 
法 。 此 处 ， 服 务 器 使 用 index.html 的 压缩 内 容 ， 以 及 在 Content-Encoding 


响应 头 中 使 用 的 压缩 算法 进行 响应 
随 着 本 方 的 深入 研究 ， 你 将 了 解 基本 的 压缩 指导 原则 和 低压 缩 配 置 的 缺陷 ， 然 后 学 习 新 的 


Brotli 压缩 算法 ( 该 算法 正在 获得 支持 ) 以 及 它 如 何 与 久负盛名 的 gzip 算法 相 媲美 。 


10.1.1 遵循 压缩 指导 原则 

压缩 资源 并 不 是 “压缩 一 切 ”， 你 需要 考虑 正在 处 理 的 文件 类 型 和 应 用 的 压缩 级 别 。 压 缩 错 
误 类 型 的 文件 或 应 用 过 多 的 压缩 ， 可 能 会 产生 意 想不到 的 后 果 。 

我 有 一 个 名 为 Weekly Timber 的 客户 ， 其 网 站 看 起 来 是 一 个 很 好 的 实验 对 象 。 我 们 将 从 修改 


压缩 级 别 配 置 开 始 。 首 先 获取 Weekly Timber 的 网 站 代码 ， 并 安装 其 Node 依赖 项 : 


git clone https://github.com/webopt/chl0-asset-delivery.git 
cd chl0-asset-delivery 


npm install 


现在 先 不 运行 http.js Web 服务 器 。 你 需要 先 对 服务 器 代码 做 一 些 调整 。 
1. 配置 压缩 等 级 


A 


你 可 能 还 记得 ， 


全 


羽 


1> 


1 章 中 为 客户 网 站 压缩 资源 时 ， 通 过 npm 下 载 的 compression 模块 。 这 


个 模块 使 用 gzip 算法 一 一 最 常用 的 压缩 算法 。 可 以 通过 传递 选项 来 修改 此 模块 应 用 的 压缩 级 别 。 
在 Weekly Timber 网 站 的 根 目录 中 ， 打 开 http.js 并 找到 以 下 行 : 


app.use (compression()); 


这 就 是 compression 模块 的 功能 所 在 。 你 会 注意 到 这 个 模块 的 调用 是 一 个 空 参数 的 函数 调 
用 。 可 以 通过 level 选项 指定 0~9 的 数字 修改 压缩 级 别 ， 其 中 0 代表 不 压缩 ，9 代表 最 大 值 。 


默认 值 为 65。 下 面 是 将 压缩 级 别 设置 为 7 的 示例 : 
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app.use (compression({ 
level: 7 

})); 

下 面 输入 node http.js 启动 Web 服务 器 ， 并 开始 测试 此 设置 的 效果 。 请 注意 ， 无 论 何 时 
进行 更 改 ， 都 需要 停止 服务 器 (通常 按 Ctrl+C ) 并 重启 。 

现在 , 你 可 以 尝试 level 设置 , 并 查看 它 对 总 页 面 大 小 的 影响 。 如 果 将 level 设置 为 0( 不 
压缩 )， 则 http://localhost:8080/index.html 的 总 页 面 大 小 将 为 393 KB; 如 果 设 置 为 最 大 值 9， 那么 
页 面 大 小 将 为 299 KB; 将 设置 从 0 提升 到 1， 将 使 总 页 面 大 小 降低 到 307 KB。 

将 压缩 级 别 设置 为 9 并 非 总 是 最 佳 策略 。level 设置 得 越 高 ，CPU 压缩 响应 所 需 的 时 间 就 
越 多 。 图 10-2 说 明了 应 用 于 jQuery 库 的 压缩 级 别 对 TTFB 和 加 载 时 间 的 影响 。 


压缩 级 别 对 jQuery 的 TTFB 和 
加 载 时 间 的 影响 (时间 越 短 越 好 ) 


1000 ms = 一 sa 总 加 载 时 间 
压缩 级 别 
820 ms 
640 ms 


460 ms 


280 ms 


100 ms 
压缩 级 别 


图 10-2 请 求 jqueryminjs 时 ， 压 缩 级 别 设置 对 总 加 载 时 间 和 TTFB 的 影响 。 测 试 是 在 
Chrome 的 Regular 3G 网 络 节 流 配置 下 进行 的 


可 以 看 到 ， 最 显著 的 改进 发 生 在 打开 压缩 时 。 但 是 把 级 别提 高 到 9 的 过 程 中 ，TTFB 似乎 在 
稳步 上 升 。 总 的 加 载 时 间 似 乎 在 5 或 6 附近 保持 不 变 ， 之 后 开始 略 有 增加 。 有 一 个 收益 递减 的 
临界 点 ， 更 糟 的 是 ， 在 这 个 临界 点 上 ， 进 一 步 提高 压缩 级 别 没有 任何 帮助 。 

同样 值得 注意 的 是 ， 这 些 测试 本 身 并 不 是 在 现实 环境 中 ， 而 是 在 本 地 的 Node Web 服务 右上 
进行 的 ， 其 中 唯一 的 流量 来 自 本 地 计算 机 。 在 繁忙 的 生产 环境 Web 服务 右上 ， 压 缩 内 容 所 花费 
的 额外 CPU 时 间 可 能 会 使 问题 复杂 化 ， 并 使 总 体 性 能 变 差 。 我 能 给 出 的 最 好 建议 是 : 在 有 效 载 
和 荷 大 小 和 压缩 时 间 之 间 取 得 平衡 。 大 多 数 情况 下 , 默认 压缩 级 别 6 是 最 适合 的 , 但 是 你 自己 的 测 
试 才 是 最 权威 的 信息 源 。 
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此 外 ,任何 使 用 gzip 的 服务 器 都 应 该 提供 0~9 的 压缩 级 别 设置 ,例如 ,在 运行 mod_deflate 
模块 的 Apache 服务 器 上 ，DeflateCompressionLevel 就 是 合适 的 设置 。 有 关 信息 ， 请 参阅 
Web 服务 器 软件 的 文档 。 


2. 压缩 适当 的 文件 类 型 

在 第 1 章 , 我 针对 压缩 哪些 类 型 的 文件 给 出 了 两 个 建议 : 总 是 压缩 文本 文件 类 型 ( 因为 它们 
的 压缩 效果 很 好 )， 以 及 避免 压缩 内 部 已 经 压缩 的 文件 。 你 应 该 避免 压缩 大 多 数 图 像 类 型 (SVG 
除外 ，SVG 属于 XML 文件 ) 和 字体 文件 类 型 ， 如 WOFF 和 WOFF2。 在 Node Web 服务 器 上 使 
用 的 compression 模块 不 会 尝试 压缩 所 有 内 容 。 如 果 要 压缩 所 有 资源 ， 必须 通过 filter 选项 
传递 函数 来 告诉 它 ， 如 代码 清单 10-1 所 示 。 


代码 清单 10-1 使 用 compression 模块 压缩 所 有 文件 


app.use (compression(t{ 


filter: function(request, response){ Pe 
return true; 压缩 所 有 i 

} 下 逻辑 应 用 压缩 

)) ) ; 内 容 


如 果 将 服务 器 配置 修改 成 上 述 代 码 ， 请 重启 服务 器 以 使 更 改 生效 。 导 航 到 http://localhost: 
8080,， 查看 Network 面板 ， 将 看 到 压缩 现在 已 应 用 于 所 有 内 容 。 在 我 的 测试 中 , 我 比较 了 所 有 压 
缩 级 别 下 JPEG、PNG 和 SVG 图 像 的 压缩 比 ， 如 图 10-3 所 示 。 


所 有 压缩 级 别 设 置 中 ， 各 种 图 像 类 型 的 压缩 比 


(数值 越 低 越 好 ) 
100% 
we 
80% | | JPEG 
SVG 
3 60% 
二 
志 
40% 
20% 
0% 
0 1 2 3 4 在 6 学 8 9 
压缩 级 别 
图 10-3 ”所 有 gzip 压缩 级 别 下 的 PNG、JPEG 和 SVG 图 像 的 压缩 比 


如 你 所 见 , PNG 和 JPEG 根本 不 能 压缩 。SVG 压缩 得 很 好 ， 因 为 它们 是 由 可 压缩 的 文本 数据 
组 成 的 。 这 并 不 意味 着 只 有 基于 文本 的 资源 才能 得 到 很 好 的 压缩 。 如 第 7 章 所 述 ，TTF 和 EOT 
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字体 就 压缩 得 非常 好 ， 它 们 是 二 进 制 类 型 。 因 为 JPEG 和 PNG 在 处 理 时 已 经 被 压缩 了 ， 所 以 压 
缩 它们 没有 任何 优势 。 涉及 这 些 类 型 的 图 像 时 ,可 以 通过 第 6 章 中 介绍 的 图 像 优 化 技术 来 节省 最 
大 的 空间 。 

更 糟糕 的 是 , 压缩 那些 内 部 已 压缩 的 文件 类 型 会 降低 性 能 , 因为 压缩 不 可 压缩 的 文件 需要 更 
多 的 CPU 时 间 。 这 会 延迟 服务 器 发 送 响应 ， 从 而 降低 该 资源 的 TTFB。 除 此 之 外 , 浏览 器 还 必须 
解码 这 些 已 编码 的 资源 ， 在 客户 端 花 费 CPU 时 间 来 执行 没有 任何 好 处 的 工作 。 

如 果 遇 到 不 确定 是 否 可 压缩 的 文件 类 型 ,请 进行 一 些 基 本 测试 。 如 果 几 乎 没有 收益 , 那么 压 
缩 这 种 类 型 的 文件 不 太 可 能 提高 网 站 访问 性 能 。 

接 下 来 学 习 新 的 Brotli 压缩 算法 ， 并 与 广 受 认同 的 gzip 算法 进行 比较 。 
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多 年 来 ，gzip 一 直 是 首选 的 压缩 方法 ， 而 且 这 种 情况 似乎 不 会 很 快 改变 。 但 一 个 有 前 途 的 新 
竞争 者 已 经 登场 一 一 Brotli。 尽 管 Brotli 在 某 些 方面 的 性 能 与 gzip 相当 ， 但 它 显 示 出 了 和 良好 的 前 
景 ， 并 在 不 断 地 发 展 。 考 虑 到 这 一 点 ，Brotli 值得 你 考虑 。 但 是 查看 Brotli 性 能 之 前 ， 先 看 看 如 
何在 浏览 器 中 检查 Brotli 支持 情况 。 


想 了 解 更 多 关于 Brotli 的 信息 吗 ? 
虽然 本 节 对 Brotli 的 介绍 有 一 定 深度 ,但 并 不 完整 ,在 我 为 Smashing 杂志 撰写 的 文章 "Next 
Generation Server Compression With Brotli” 中 , 你 可 以 了 解 更 多 关于 这 种 新 兴 压 缩 算法 的 信息 。 


1. 检查 Brotli 支持 

如 何 知道 你 的 Web 浏览 器 是 否 支 持 Brotli? 答案 在 Accept -Encoding 请 求 头 中 ,支持 Brotli 
的 浏览 器 将 仅 使 用 此 算法 ， 通 过 HTTPS 连接 压缩 内 容 。 如 果 有 Chrome 50 或 更 高 版 本 ， 请 打开 
开发 者 工具 ， 转 到 任 一 启用 HTTPS 的 网 站 上 的 Network 选项 卡 ， 查 看 任 一 资源 的 
Accept-Encoding 请 求 头 的 值 ， 如 图 10-4 所 示 。 


accept-encoding: gzip, deflate, sdch, br 


图 10-4 Chrome 使 用 br 令 牌 显示 对 Brotli 压缩 的 支持 


如 果 浏 览 器 支持 Brotli， 它 会 在 accept-Encoqing 请 求 头 中 将 pr 令 牌 包含 在 接受 的 编码 
列表 中 。 当 支持 它 的 服务 器 看 到 这 个 令 牌 时 ， 就 会 用 Brotli 压缩 的 内 容 进 行 回复 ， 否 则 它 应 该 回 
退 到 下 一 个 支持 的 编码 方案 。 

接 下 来 , 我 们 将 在 Node 中 通过 shrink-ray 包 编 写 使 用 Brotli 的 Web 服务 器 。 如 果 你 想 跳 
过 , 请 在 签 出 ch10-asset-delivery 仓库 的 根 文件 夹 的 终端 窗口 中 ， 输入 命令 git checkout 
-f pbrot1li。 否则 请 继续 1 


222 第 10 章 ”微调 资源 传输 


2. 在 Node 中 编写 启用 Brotli 的 Web 服务 器 
我 们 之 前 一 直 在 使 用 compression 包 压 缩 资 源 。 遗 
个 包 的 分 义 shrink-ray 支持 Brotli。 由 于 Brotli i 


npm i https shrink-ray 


遗憾 的 是 ， 这 个 包 不 支持 Brotli。 不 过 这 
还 需要 SSL， 所 以 还 需要 安装 https 包 : 


并 输入 代码 清单 10-2。 


导入 包含 Brotli 压 缩 中 
间 件 的 shrink-ray 
模块 


| 


完成 后 ， 在 项 目的 根 目录 中 创建 一 个 新 文件 brotli.js， 
代码 清单 10-2 ”在 Node 中 编写 一 个 支持 Brotli 的 Web 服务 器 
导入 Brotli 工作 导入 Express 框架 
所 需 的 https 区 express = require("express"), 
模块 https = require("https"), 
shrinkRay = require("shrink-ray"), 
fs = require("fs"), 
htdocs 目录 (Web path = require("path"), 
根 文件 夹 ) 的 相对 | app = express()， 
路 径 DUBDir = “ /htdoces™; 


app.use (shrinkRay ({ 


关闭 shrink-ray 模块 
中 的 缓存 。 这 样 做 是 为 
了 正确 测试 压缩 算法 


指示 Express cache: function(request, response)t{ 
使 用 shrink- return false; i 
压缩 模块 } 创 建 静态 文件 服务 
)) ) ; 器 ， 以 提供 本 地 目录 
以 外 的 文件 
app.use (express.static(path.join(_ qirname，PubDir) ))， 
创建 一 个 https.createServer({ 
HTTPS 服 key: fs.readFileSync("crt/localhost.key"), 
务 器 实例 cert: fs.readFileSync("crt/localhost.crt") 读 取 本 地 HTTPS 
Ee }, app) .listen(8443); 4 器 监听 | 2 
旨 示 服务 器 服务 器 工作 所 需 的 
四 8443 端口 SSL 密 钥 和 证 书 
请 求 


与 常见 的 Node 程序 一 样 , 脚本 的 第 


部 分 将 导入 需要 的 所 有 内 容 ， 


包括 新 安装 的 shrink- 


ray 和 https 包 。 之 后 , 创建 一 个 基于 Express 的 静态 Web 服务 器 ， 创 建 方 式 与 以 前 基本 相同 ， 


日 


人 


是 这 次 是 在 HTTPS 服务 器 上 。 


你 会 注意 到 , 此 服务 器 有 一 点 不 一 样 , 即 你 将 资源 单独 放置 在 项 目 根 目录 下 名 为 htdocs 的 子 
文件 夹 中 。 这 样 做 是 因为 证 书 文件 保存 在 项 目 根 目录 的 crt 文件 夹 中 。 如 果 你 的 网 站 文件 来 自 一 


个 允许 公众 访问 crt 的 文件 夹 的 文件 夹 , 那 安 全 性 就 太 糟糕 了 。 虽然 这 


但 坚持 采用 良好 的 安全 措施 总 是 好 的 。 
遍 写 完 这 段 代码 后 ， 可 以 通过 键入 


Wh 


node brotli.js 启动 服务 器 


文 只 是 一 个 本 地 网 站 的 测试 ， 


。 如 果 没 有 任何 错误 ， 你 


应 该 能 够 导航 到 https://localhost:8443 并 查看 客户 端的 网 站 。 
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引发 安全 异常 
浏览 本 地 Web 服务 器 时 可 能 会 收 到 安全 警告 ， 因 为 提供 的 证 书 不 是 由 认可 的 颁发 机 构 颁 
发 的 。 此 时 可 以 忽略 该 敬告， 但 要 始终 确保 在 生产 Web 服务 器 上 使 用 签名 的 证 书 。 


如 果 在 Chrome 中 启用 了 Brotli 编码 ， 可 以 打开 开发 者 工具 中 的 网 络 请 求 面 板 ， 通 过 
Content-Encoding 列 查 看 哪些 请 求 正 在 用 Broti 压缩 ， 如 图 10-5 所 示 。 


Name Method Status Protocol Type Initiator Size Time Content-Encoding 
[| localhost GET 200 httpili document Other 1.4KB 131ms br 

| styles.min.css GET 200 http 站 1 stylesheet lindex}-9 38KB 147ma br 

| jquery.min.js GET 200 http/1.1 script lindex}:51 26.5 KB 2.37 号 | br 

_ | logo.syg GET 200 http 门 .1 svg+xml index}:13 10.3KB i179 br 


Broti 编 码 令 牌 


图 10-5 可 以 在 Chrome 的 网 络 请 求 面 板 中 ， 通 过 在 Content-Encoding 列 中 查找 br 
令 牌 查看 Brotli 编码 的 文件 


现在 你 的 本 地 Web 服务 器 正在 使 用 Brotli 压缩 内 容 ， 下 面 可 以 将 其 性 能 与 gzip 进行 比较 。 


3. Brotli 和 gzip 的 性 能 比较 

仅 比 较 Broti 和 gzip 的 默认 性 能 级 别 是 不 够 的 ,必须 在 压缩 级 别 的 整个 范围 上 比较 二 者 。 如 
前 所 述 , gzip 的 压缩 级 别 可 以 通过 指定 0~9 的 整数 来 配置 使 用 Brotli 时 , 可 以 执行 类 似 的 操作 ， 
但 范围 是 0~11。 方 法 是 将 aual ity 参数 传递 给 brotlijs 中 的 shrinkRay 对 象 , 如 代码 清单 10-3 
所 示 。 


代码 清单 10-3 配置 Brotli 压缩 级 别 
app.use(SnhrinkRay ({ 
cache: function(request, response)t{ 
return false; 


压缩 级 别 , 可 由 0~11 配置 。 
小 


} 
brotli: { 


; 值 越 高 ， 文 件 越 小 
quality: 


} 
})); 


与 gzip 的 level 设置 一 样 ，quality 设置 可 以 调整 Brotli 压缩 级 别 。 值 越 高 ， 文 件 越 小 。 
图 10-6 比较 了 压缩 jQuery 最 小 化 版 本 时 的 gzip 和 Brotli。 
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gzip 与 Brotli 在 可 配置 级 别 上 的 jQuery 压缩 性 能 (数值 越 低 越 好 ) 


35 KB ”一 gzip 
Brotli 
尿 
二 30KB 
25 KB 


2 3 4 5 6 7 8 9 1011 
压缩 级 别 
图 10-6 在 所 有 可 比较 的 压缩 级 别 上 使 用 gzip 与 Brotli 压缩 jQuery 库 的 性 能 对 比 。 
( gzip 压缩 级 别 为 0 的 效果 与 未 压缩 相同 ， 故 省 略 。) 由 于 gzip 最 大 的 压缩 
级 别 为 9， 因 此 无 法 与 Broti 10 和 11 的 quality 设置 进行 比较 


在 我 的 测试 中 ,Brotli 在 可 比较 的 压缩 级 别 上 提供 了 3%~10% 的 改进 (除了 在 quality 设置 
为 4 时 ， 其 结果 与 gzip 相同 )。gzip 提供 的 最 小 文件 大 小 为 29.4KB， 而 Broti 是 26.5 KB。 对 于 
这 样 一 个 常用 的 资源 来 说 ， 似 乎 是 相当 不 错 的 改进 ， 但 是 Broti 对 TTFB 的 影响 呢 ? 压缩 是 一 项 
CPU 密集 型 任务 ,因此 测量 Broti 对 这 个 重要 指标 的 影响 是 有 意义 的 。 图 10-7 显 示 了 相同 的 jQuery 


资源 在 两 个 算法 所 有 压缩 级 别 上 的 平均 TTFB 比较 。 
使 用 gzip 和 Brotli 压 缩 jQuery 的 首 字 节 时 间 对 比 ( 数 值 越 低 越 好 ) 
225 ms 王 =—= gzip 
Brotli 

200 ms 上 

17S ms 上 

15S0 ms 上 

12S ms 上 

100 mas | | | | | | | | | | 


| 
0 1 2 3 4 5 6 7 8 9 1 1 
压缩 级 别 


图 10-7 压缩 jQuery 库 时 ，gzip 与 Brotli 的 TTFB 性 能 对 比 
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达到 10 和 11 的 quality 设置 之 前 ，Broti 和 gzip 的 性 能 大 致 相似 。 在 这 一 点 后 ，Brotli 变 
得 有 点 迟钝 。 虽 然 这 两 个 设置 产生 的 文件 较 小 ,但 代价 是 让 用 户 等 待 。 此 实例 中 的 最 佳 设 置 是 9。 

话 虽 如 此 , 这 只 是 在 一 个 小 型 JavaScript Web 服务 器 上 的 性 能 比较 。 许 多 Web 服务 器 还 不 支 
持 Brotli。Nginx 有 一 个 Brotli 编码 模块 ，Apache 正在 开发 一 个 mog_brot1i 模块 ， 但 你 必须 知 
道 如 何 编译 。 


压缩 缓存 机 制 
shrink-ray 有 一 种 缓存 机 制 ， 我 们 禁用 了 该 机 制 以 测试 压缩 性 能 。 如 果 你 的 Web 服务 
器 缓存 压缩 内 容 以 加 快 其 向 浏览 器 的 传输 ， 那 就 应 该 利用 它 。 不 过 请 注意 ， 许 多 压缩 模块 ( 例 
如 流行 的 Apache 模块 mod_deflate ) 不 会 缓存 压缩 内 容 。 


虽然 目前 对 这 种 压缩 技术 的 支持 比较 有 限 ， 但 它 正在 发 展 ， 并 显示 出 了 优 于 gzip 的 前 景 。 
如 果 决 定 将 其 提供 给 你 的 用 户 ， 需 要 在 你 的 网 站 上 做 很 多 测试 ， 以 确保 不 会 造成 任何 性 能 问题 。 
还 要 记 住 ， 这 是 一 个 正在 进行 的 项 目 ， 其 性 能 在 未 来 可 能 会 发 生变 化 。 不 过 至 少 现在 值得 一 看 。 
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本 书 的 大 部 分 内 容 都 没有 直接 涉及 缓存 , 但 这 样 做 是 有 原因 的 : 第 一 印象 最 重要 。 你 应 该 在 
优化 时 假设 网 站 的 任何 一 次 访问 都 是 特定 用 户 的 首次 访问 。 糟 糕 的 第 一 印象 足以 阻止 用 户 回 访 。 

虽然 这 是 一 个 很 好 的 假设 , 但 也 要 记 住 , 你 的 用 户 中 有 相当 一 部 分 可 能 会 回访 或 导航 到 后 续 
页 面 。 在 这 两 种 情况 下 ， 网 站 都 将 受益 于 良好 的 缓存 策略 。 

本 节 将 学 习 绥 存 。 你 将 看 到 如 何 开 发 缓存 策略 来 为 网 站 提供 最 佳 性 能 ,以 及 如 何在 更 新 网 站 
内 容 时 使 缓存 的 资源 失效 。 下 面 开 始 学 习 缓 存 的 工作 原理 。 


10.2.1 理解 缓存 
缓存 不 难 理解 。 浏 览 器 在 下 载 资源 时 , 会 遵循 服务 器 指定 的 策略 ， 以 确定 在 以 后 的 访问 中 是 


否 应 该 再 次 下 载 该 资源 。 如 果 服 务 器 没有 定义 策略 ,浏览 器 默认 设置 就 会 启动 一 一 通常 只 缓存 当 
次 会 话 的 文件 ， 如 图 10-8 所 示 。 
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1. 用户 发 送 请 求 


GET /index.html HTTP/1.1 
Host: jeremywagner.me 
Accept: text/html 
User-Agent: Mozilla/5.0 2. Web 服 务 器 检查 
加 资源 是 否 已 修改 并 
© 响应 


| I 
ef 


index.html 


浏览 器 使 用 
缓存 的 副本 


HITE/I 二 20070K 
Content-Length: 47044 
Content-Type: text/html 


图 10-8 缓存 过 程 概述 。 用 户 请 求 index.html， 服 务 器 检查 自用 户 上 次 请 求 以 来 资源 是 
否 发 生 更 改 。 如 果 未 更 改 ， 服 务 器 将 以 304 Not Modified 状态 响应 ， 并 使 用 浏 
览 器 的 缓存 副本 ; 如 果 已 更 改 ， 服 务 器 将 以 “200 OK” 状 态 和 所 请 求 资源 的 
新 副本 来 响应 


缓存 带 来 了 强大 的 性 能 改进 ,并 且 对 页 面 加 载 时 间 有 着 巨大 的 影响 。 若 要 查看 此 效果 , 请 打 
开 Chrome 的 开发 者 工具 , 转 到 Network 面板 , 然后 禁用 缓存 。 转 到 之 前 从 GitHub 下 载 的 Weekly 
Timber 网 站 , 并 加 载 页 面 。 请 注意 加 载 时 间 和 传输 的 数据 量 。 然 后 重新 启用 缓存 , 重新 加 载 页 面 ， 
并 记录 相同 的 数据 点 。 你 将 看 到 图 10-9 所 示 的 内 容 。 
首次 访问 : 
未 缓存 一 >» 14requests | 298 KB transferred | Finish: 4.04s | DOMContentLoaded: 1.88s | Load: 4.04s 


后 续 访 问 : 一 > 14requests | 2.9 KB transferred | Finish: 628 ms | DOMContentLoaded: 550 ms | Load: 657 ms 
已 缓存 


图 10-9 ”网 站 在 首次 (未 缓存 ) 访问 和 随后 访问 时 的 加 载 时 间 和 数据 负载 对 比 。 
页 面 大 小 减 小 了 近 98%， 加 载 速度 也 快 了 很 多 ， 这 都 是 缓存 的 缘故 


此 处 的 行为 可 以 分 为 两 种 缓存 状态 : 未 命中 和 已 命中 。 缓存 命中 时 , 用 户 正 首次 访问 该 页 面 。 
用 户 的 浏览 咒 缓 存 为 空 ， 并 且 必 须 从 服务 器 下 载 所 有 内 容 才能 泻 染 页 面 时 ， 就 会 发 生 这 种 情况 。 
当 用 户 再 次 访问 页 面 时 ,命中 状态 就 会 存在 。 在 此 状态 下 ， 资 源 位 于 浏览 絮 绥 存 中 ， 因 此 不 会 再 
次 下 载 。 

你 自然 会 好 奇 是 什么 造成 了 这 种 行为 。 答案 是 cache-control 头 部 。 这 个 头 部 几乎 在 每 一 
个 浏览 器 中 都 指示 缓存 行为 ， 其 语法 很 容易 理解 。 
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1. 使 用 cache-control 头 部 的 max-age 指令 
使 用 cache-control 的 最 简单 方法 是 通过 其 max-age 指令 ,该 指令 指定 缓存 资源 的 生命 
周期 ( 以 秒 为 单位 )。 下 面 是 一 个 简单 的 例子 : 


Cache-Control: max-age=3600 


假设 这 个 响应 头 是 在 一 个 名 为 behaviors.js 的 资源 上 设置 的 。 用 户 第 一 次 访问 页 面 时 ， 
behaviors.js 会 被 下 载 ， 因 为 用 户 缓存 中 没有 这 个 文件 。 当 用 户 再 次 访问 时 ， 请 求 的 资源 对 于 
max-age 指令 中 指定 的 时 间 量 (3600 秒 ， 或 者 更 直观 地 说 ， 一 小 时 ) 之 内 的 缓存 是 有 效 的 。 

要 测试 这 个 头 部 有 一 个 好 方法 : 将 它 设 置 为 一 个 较 低 的 值 (例如 10 秒 左右 )。 对 于 我 们 客户 
的 网 站 ， 你 可 以 通过 修改 http.js 并 编辑 调用 express .static 的 行 ， 指 定 Cache-Control 的 
max-age 值 ， 如 下 所 示 : 


app.use (express.static(_ dirname, { 
maxAge: "10s" 
})); 


这 个 值 10s 表示 10 秒 。 使 用 此 修改 启动 /重启 服务 器 后 ， 请 在 http://localhost:8080 重新 加 载 
页 面 。 然 后 将 光标 放 在 地 址 栏 中 并 按 回 车 键 〈 而 不 是 再 次 重新 加 载 页 面 )， 或 者 单 击 页 面 顶部 链 
接 到 index.html 的 标识 。 查 看 网 络 请 求 列表 中 的 jquery.min.js 请 求 ， 你 将 看 到 类 似 于 图 10-10 所 
示 的 内 容 。 


Name Method Status | Size 


|_ | jquery.min.js GET 200 (from cache) 
图 10-10 从 本 地 浏览 器 缓存 检索 的 jQuery 副本 


当 你 导航 到 一 个 页 面 而 不 是 重新 加 载 它 时 ( 例如 单 击 重新 加 载 图 标 时 )，cache-Control 
头 部 的 max-age 指令 的 值 将 影响 浏览 器 是 否 从 本 地 缓存 中 获取 某 些 内 容 。 如 果 该 项 存在 于 本 地 
缓存 中 ， 则 不 会 向 服务 器 请 求 该 项 。 

如 果 重 新 加 载 ， 或 者 max-age 指令 中 指定 的 时 间 已 过 ,浏览 器 将 与 服务 器 联系 以 重新 验证 
缓存 的 资源 。 浏览 器 执行 此 操作 时 , 将 检查 资源 是 否 已 更 改 。 如果 已 更 改 , 则 下 载 资源 的 新 副本 ， 
否则 ， 服 务 器 以 304 Not Modified 状态 响应 ， 而 不 发 送 资 源 。 这 个 过 程 如 图 10-11 所 示 。 
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用 户 请 求 已 
缓存 的 资源 


max-adge 
是 否 过 期 ? 


了 


浏览 器 使 用 资源 浏览 器 联系 服务 器 
的 缓存 副本 以 验证 资源 


他 


服务 器 以 304 Not Modified 
状态 码 进 行 响应 


浏览 器 从 服务 器 下 载 
最 新 的 资源 副本 


图 10-11 cache-control 头 部 的 max-age 指令 带 来 的 影响 ， 以 及 使 用 该 指令 


时 浏览 器 与 服务 器 间 的 交互 情况 


服务 器 检查 资源 是 否 已 更 改 的 方式 可 能 会 有 所 不 同 。 流 行 的 方法 是 使 用 实体 标记 ， 简 称 
ETag。ETag 是 根据 文件 内 容 生成 的 校 验 和 。 浏 览 器 将 这 个 值 发 送 到 服务 器 ， 服 务 器 将 通过 验 
证 该 值 来 查看 资源 是 否 已 更 改 。 另 一 个 方法 是 检查 文件 在 服务 器 上 最 后 修改 的 时 间 ， 并 根据 上 
次 修改 时 间 提 供 资源 的 副本 。 可 以 使 用 cache-control 头 部 修改 此 行为 。 下 面 简要 介绍 这 些 


选项 。 


2. 使 用 no-cache、no-store、stale-while-revalidate 控制 资源 重新 验证 
max-age 指令 对 于 大 多 数 网 站 来 说 都 是 适合 的 ， 但 有 时 候 你 需要 限制 缓存 行为 或 者 完全 取 
消 它 。 例 如 ， 你 的 应 用 可 能 需要 尽 可 能 新 的 数据 ， 如 在 线 银 行 或 股市 网 站 。 此 时 可 以 使 用 以 下 3 


个 cache-Control 指令 来 帮助 限制 缓存 行为 。 


口 no-cache 


过 服务 器 重新 验证 资源 。 


口 no-store 


这 要 求 浏览 需 在 每 次 访问 页 面 时 下 载 所 有 受 影 


向 浏览 絮 表 明 ， 下 载 的 任何 资源 都 可 以 存储 在 本 地 ,但 浏览 器 必须 始终 通 


到 


这 个 指令 比 no-cache 更 进一步 ， 它 表示 浏览 器 不 应 存储 受 影响 的 资源 。 


响 的 资源 。 
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口 stale-while-revalidate 与 max-adye 类 似 , stale-while-revalidate 接受 以 
秒 为 单位 的 时 间 。 不 同 之 处 在 于 ， 当 资源 的 max-age 已 超过 并 过 时 的 时 候 ， 此 头 部 定义 
了 浏览 絮 可 在 缓存 中 使 用 过 时 资源 的 宽 限 期 。 然 后 ， 浏 览 器 应 在 后 台 获 取 过 时 资源 的 新 
副本 ,并 将 其 放 入 缓存 以 供 下 次 访问 。 虽 然 这 种 行为 不 受 保证 ， 但 它 可 以 在 有 限 的 场景 
中 提高 缓存 性 能 。 

显然 , 这 些 指令 都 会 影响 或 消除 缓存 提供 的 性 能 优势 , 但 有 时 你 需要 确保 从 不 存储 或 缓存 资 

源 。 请 谨慎 使 用 这 些 指 令 ， 知 要 使 用 ， 务 必 确 保 理 由 充分 。 


3. Cache-Control 和 CDN 
可 以 在 网 站 前 使 用 CDN。CDN 是 一 种 代理 服务 ， 它 位 于 你 的 网 站 前 面 ， 并 优化 内 容 向 用 户 
的 传输 。 图 10-12 说 明了 CDN 的 基本 概念 。 


地 域 分 散 的 用 户 
你 的 Web 内 容 传 输 网 络 


[ 


图 10-12 CDN 的 基本 概念 。CDN 是 位 于 网 站 之 前 的 一 层 代理 ， 将 内 容 分 发 给 世界 各 
地 的 用 户 。CDN 可 以 通过 地 域 上 分 散 的 服务 器 网 络 实现 托管 内 容 。 用 户 的 内 
容 请 求 通过 与 其 最 接近 的 服务 器 完成 


CDN 有 能 力 在 全 球 范围 内 分 发 你 的 内 容 。 你 可 以 从 ( 比 自己 的 主机 ) 更 靠近 用 户 的 计算 机 
提供 网 站 资源 和 内 容 。 较 短 的 距离 可 以 降低 这 些 资源 的 延迟 ， 从 而 提高 性 能 。 

为 了 实现 这 一 点 ，CDN 将 你 的 资源 托管 在 它们 的 服务 器 网 络 上 ,因此 CDN 可 以 有 效 缓存 你 
的 内 容 。 可 以 将 两 个 cache-control 指令 (public 和 private ) 与 max-age 结合 使 用 ， 它 
们 能 够 帮助 你 控制 CDN 缓存 内 容 的 方式 。 

将 public 的 Cache-Control 指令 与 max-age 结合 使 用 ， 如 下 所 示 : 


Cache-Control: public, max-age=86400 


这 将 指示 所 有 中 介 (如 CDN ) 在 其 服务 器 上 缓存 资源 。 如 果 使 用 cache-Control, 通常 不 
需要 显 式 指定 bublic， 因 为 它 是 隐 含 的 。 

private 指令 的 语法 与 buplic 相同 , 但 它 指 示 所 有 中 介 都 不 缓存 资源 。 使 用 这 个 头 部 处 理 
资源 时 ， 就 像 CDN 根本 不 起 作用 一 样 。 用 户 的 浏览 器 仍然 根据 头 部 的 max-age 值 缓存 资源 , 但 
仅 针对 CDN 后 面 的 Web 源 服 务 器 ， 而 不 是 CDN 本 身 。 

下 面 学 习 cache-Control 头 部 的 所 有 知识 ,并 了 解 如 何 针 对 你 的 网 站 创建 有 意义 的 缓存 策略 。 
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10.2.2 ”制定 最 佳 缓存 策略 


既然 已 经 掌握 了 有 关 cache-Control 头 部 的 所 有 知识 , 那么 如 何 将 其 应 用 于 你 的 网 站 呢 ? 
与 任何 新 的 信息 一 样 ， 我 们 将 把 它 应 用 到 实际 中 ， 比 如 在 本 章 前 面 下 载 的 Weekly Timber 网 站 。 
首先 要 对 资源 进行 分 类 ， 为 每 个 类 别 选 择 一 个 合适 的 max-age 策略 以 及 有 意义 的 相关 指令 ， 然 
后 在 Web 服务 器 中 应 用 此 策略 。 


1. 资源 分 类 

对 资源 进行 分 类 时 ， 最 好 的 标准 是 资源 更 改 的 频率 。 例 如 ，HTML 文档 可 能 经 常 更 改 ， 而 
CSS 、JavaScript 和 图 像 等 资源 更 改 的 可 能 性 要 小 一 些 。 

客户 网 站 有 基本 的 缓存 要 求 , 正好 可 以 用 它 来 介绍 cache-control 的 使 用 。 这 个 网 站 的 资 
源 分 类 很 简单 : HTML 、CSS 、JavaScript 和 图 像 。 字 体 是 通过 Google Fonts 加 载 的 ， 所 以 缓存 是 
Google 的 服务 器 处 理 的 ， 你 只 需要 考虑 基础 的 部 分 。 表 10-1 展示 了 这 些 资源 类 型 的 细 分 ， 以 
及 我 为 它们 选择 的 缓存 策略 。 


表 10-1 Weekly Timber 网 站 的 资源 类 型 及 其 修改 频率 ， 以 及 应 该 使 用 的 cache-control 头 部 值 


资源 类 型 修改 频率 Cache-Control 头 部 值 
HIML 可 能 频繁 修改 ， 但 需要 尽 可 能 保持 最 新 private, no-cache, max-age=3600 
CSS 和 JavaScript 可 能 每 月 修改 public, max-age=2592000 
图 像 几乎 不 会 修改 public, max-age=31536000, 


stale-while-revalidate=86400 


这 些 选 择 背后 的 基本 原理 有 细微 的 区 别 ， 但 按照 资源 分 类 时 就 很 容易 理解 了 。 

口 HTML 文件 或 者 输出 HTML 的 服务 器 端 语 言 (例如 PHP 或 ASPNET ) 可 以 受益 于 保守 的 
缓存 策略 。 你 永远 不 会 希望 浏览 器 假定 页 面 应 该 只 从 浏览 器 缓存 中 读 取 ， 而 不 去 重新 验 
证 其 新 鲜 度 。 

四 no-cache 可 以 确保 总 是 重新 验证 资源 ， 如 果 资 源 已 更 改 , 则 下 载 新 的 副本 。 如 果 文 件 
的 内 容 没有 更 改 ， 则 重新 验证 资源 确实 会 减少 服务 器 上 的 负载 ， 但 是 no-cache 不 会 
激进 地 缓存 HTML， 以 避免 内 容 过 时 。 

和 max-age 为 一 小 时 ,可 确保 在 max-age 到 期 后 , 无 论 发 生 什 么 情况 ,都 获取 资源 的 新 
副本 。 

和 使 用 private 指令 告诉 位 于 Web 源 服务 器 前 面 的 任何 CDN : 该 资源 根本 不 应 缓存 在 
其 服务 器 上 ， 而 应 仅 在 用 户 和 Web 源 服务 器 之 间 缓 存 。 

口 CSS 和 JavaScript 是 重要 的 资源 , 但 不 需要 如 此 积极 地 缓存 。 因 此 , 你 可 以 使 用 30 天 的 
max-dageEo 
备 因为 你 会 从 为 你 分 发 内 容 的 CDN 中 受益 ， 所 以 应 该 使 用 public 指令 允许 CDN 缓存 资 

源 。 如 果 需 要 使 缓存 的 脚本 或 样式 表 失 效 ， 实 现 方式 很 简单 。 下 一 节 将 解释 这 个 过 程 。 
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口 图 像 和 其 他 媒体 文件 ( 如 字体 ) 几乎 不 会 改变 ， 而 且 这 些 往往 是 你 要 提供 的 最 大 的 资源 。 
因此 ， 把 max-age 设置 为 较 长 的 时 间 ( 比如 一 年 ) 比较 合适 。 
上 四 与 CSS 和 JavaScript 文件 一 样 ， 你 会 希望 CDN 能 够 缓存 这 些 资 源 。 因 此 此 处 自然 也 要 
使 用 public 指令 。 
昌 因为 这 些 资 源 不 会 经 常 变化 ， 所 以 你 希望 有 一 个 宽 限 期 ， 在 这 个 宽 限期 内 可 以 接受 某 
种 程度 的 过 时 资源 ， 因 此 ,一 天 的 stale-while-revalidate 周期 适合 用 来 给 浏览 
器 异步 验证 资源 的 新 鲜 度 。 
最 适合 你 的 网 站 的 缓存 策略 可 能 会 有 所 不 同 。 你 可 能 决定 不 应 该 对 HTML 文件 进行 任何 组 
存 ， 如 果 你 的 网 站 不 断 更 新 其 HTML 内 容 ， 这 也 未 必 是 糟糕 的 做 法 。 这 种 情况 下 ， 最 好 使 用 
no-store 指令 ,这 是 一 种 最 激进 的 措施 ， 它 假定 你 不 想 缓存 任何 内 容 或 不 想 再 进行 重新 验证 。 
你 也 可 以 决定 CSS 和 JavaScript 应 该 拥有 很 长 的 过 期 时 间 ， 就 像 图 像 那 样 。 这 也 很 好 , 但 是 
除非 使 缓存 无 效 ， 和 否则 进行 更 新 时 ， 可 能 会 导致 资源 过 时 。 你 也 可 能 会 采取 另 一 种 策略 ， 并 决定 
让 浏览 器 在 每 次 请 求 时 向 服务 器 重新 验证 缓存 资产 的 新 鲜 度 。 下 一 节 将 介绍 如 何 正确 地 使 缓存 的 
资源 失效 ， 不 过 需要 先 在 Node Web 服务 器 上 实现 缓存 策略 。 


2. 实现 缓存 策略 

在 本 地 Web 服务 器 上 实施 缓存 策略 很 简单 。 添 加 一 个 请 求 处 理 程序 ， 这 样 你 就 可 以 在 将 资 
源 发 送 到 客户 端 之 前 设置 响应 头 。 本 节 将 打开 httpjs， 使 用 mime 模块 检查 请 求 的 资源 类 型 ， 并 
根据 其 类 型 设置 Cache-Control 头 部 。 如 果 你 想 跳 过 ， 可 以 在 终端 窗口 输入 git checkout -f 
cache-control。 代 码 清单 10-4 以 粗 体 显示 了 http,js 的 更 改 部 分 ， 并 带 有 注释 。 


代码 清单 10-4 通过 文件 类 型 设置 Cache-Control 头 部 


var express = require("express"), 导入 mime 模块 ， 
compression = require("compression"), 查找 请 求 资源 的 


path = require("path"), 文件 类 型 
mime = require("mime"), 
app = express(), 


puUbDir.= /htdGGsY 
// 运行 静态 服务 器 setHeaders 回调 函数 
app.use (compression()); 允许 你 指定 将 在 发 送 响 
app.use(express.static(path.join( dirname, pubDir), { 应 之 前 运行 的 行为 
setHeaders: function(res, path){ 
Var fileType = mime.lookup (path); a A 
基于 fileType mime 模块 确定 
ee 二 =- 坊 > 多 3 
变量 的 值 运 行 switch(fileType){ pe 
switch 语句 case "text/html": 件 类 型 


res.setHeader ("Cache-Control", 
"private, no-cache, max-age=" + (60*60)); 


对 于 HTML 文件 , 设置 nea 
Cache-Control: 
max-age=3600 case "application/javascript": 


设置 cache-Control: public, 


max-age=2592000 


private, no-cache, case "text/javascript": 对 于 JavaScript 和 CSS 文件 ， 
case "text/css": 
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res.setHeader("Cache-Control", 
"public, max-age=" + (60*60*24*30)); 


break; 

case "image/png": 对 于 PNG、JPEG 和 SVG 图 像 ， 
case "image/jpeg": 设置 cache-Control: public, 
case "image/svg+xml": max-age=31536000 


res.setHeader ("Cache-Control", 
"public, max-age=" + (60*60*24*365)); 


break; 


})); , 
app.listen(8080); 
完成 后 ,启动 或 重启 服务 器 。 测 试 缓存 策略 的 更 改 可 能 很 棘手 , 但 可 以 采用 以 下 四 步 过 程 在 
Chrome 中 查看 工作 情况 。 
(1) 打开 一 个 新 选项 卡 ， 并 打开 Network 面板 ， 确 保 选 中 Disable Cache 复 选 枉 ， 以 获得 该 网 
页 的 最 新 副本 。 
(2) 导航 到 要 测试 的 网 页 ( 本 例 中 为 http://localhost:8080 )。 
(3) 加 载 完 成 后 ， 取 消 选 中 Disable Cache 框 。 
(4) 不 要 重新 加 载 页 面 ， 因 为 这 将 导致 浏览 器 与 服务 器 联系 以 重新 验证 资源 。 正 确 做 法 是 导 
航 到 页 面 。 要 在 已 经 打开 的 页 面 上 执行 此 操作 ， 请 点 击 地 址 栏 并 按 回 车 键 。 
执行 此 操作 时 ， 可 以 看 到 cache-control 头 部 的 实际 效果 。 图 10-13 显示 了 网 络 面板 中 部 
分 资源 的 列表 。 


对 重新 验证 资源 
请 求 的 响应 
_ index.html GET 304 257B 17ms| private, no-cache, max-age=3600 
_ styles.min.css GET 200 (from cache) | 9 ms| public, max-age=2592000 
_ logo.svg GET 200 (from cache) | 11ms | public, max-age=31536000 
_ icon-facebook.svg GET 200 (from cache) | 11ms | public, max-age=31536000 
浏览 器 缓存 缓存 策略 


中 的 资源 
图 10-13 ”缓存 策略 对 Weekly Timber 网 站 的 影响 。 每 次 请 求 时 ， 服 务 器 都 会 重新 验证 
HTML。 如 果 服 务 器 上 的 文档 没有 更 改 ， 服 务 器 会 返回 304 状态 。 从 浏览 
缓存 读 取 的 项 不 会 返回 Web 服务 器 
这 种 缓存 策略 对 于 我 们 的 目的 来 说 是 最 佳 的 。 缓 存 命中 时 ， 只 会 有 一 个 请 求 用 于 在 回访 时 
向 服务 器 验证 HTML 文件 的 新 鲜 度 。 如 果 本 地 缓存 的 文档 仍然 是 新 鲜 的 ， 则 页 面 大 小 不 会 超过 
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0.5 KB。 这 会 使 得 后 续 访 问 此 页 面 的 速度 更 快 ， 并 且 所 有 页 上 共享 的 资源 都 缓存 在 后 续 页 面 中 ， 
从 而 减少 这 些 页 面 的 加 载 时 间 。 
当然 ， 有 时 你 会 更 新 你 的 网 站 ,并 需要 使 浏览 器 缓存 中 的 资源 失效 。 下 一 节 将 解释 如 何 做 到 


这 一 点 。 


10.2.3 ”使 缓存 资源 失效 


设想 这 样 一 个 场景 : 你 为 Weekly Timber 的 员工 们 辛苦 工作 了 几 个 星期 ， 然 后 将 网 站 部 署 到 
生产 环境 , 但 几 小 时 后 却 发 现 有 一 个 缺陷 。 这 个 缺陷 可 能 出 现在 CSS 或 JavaScript 中 ,也 可 能 是 
图 像 或 HTML 中 的 内 容 问题 。 这 些 错 误 已 经 被 修复 并 部 署 到 生产 环境 ,但 是 网 站 仍然 没有 为 你 
的 用 户 更 新 ， 因 为 浏览 器 缓存 阻止 了 他 们 看 到 你 的 更 改 。 

尽管 “重新 加 载 页 面 ” 或 “清空 缓存 ”等 建议 可 能 会 安抚 紧张 的 营销 人 员 和 商业 客户 ,但 这 
并 不 是 用 户 通常 与 网 页 交互 的 方式 。 在 典型 情况 下 , 用 户 可 能 不 会 重新 加 载 页 面 。 你 需要 找到 一 
种 方法 来 强制 再 次 下 载 页 面 的 资源 。 

我 可 能 说 得 很 思 嗪 ,但 这 个 问题 很 容易 解决 。 如 果 你 正在 使 用 上 一 节 中 概述 的 缓存 策略 ， 浏 
览 器 将 始终 使 用 服务 器 验证 HTML 的 新 鲜 度 。 此 时 ， 你 可 以 将 更 新 的 资源 分 发 给 在 浏览 器 缓存 
中 有 过 时 资源 的 用 户 。 


1. 使 CSS 和 JavaScript 资源 失效 

Weekly Timber 网 站 有 一 个 CSS 或 JavaScript 缺 陷 因为 某 种 原因 通过 了 QA 并 发 布 到 了 生产 环 
境 中 。 通过 识别 错误 并 部 署 修 复 程序 ,你 可 以 验证 它 是 否 在 生产 中 修复 了 ， 因 为 你 重新 加 载 了 页 
面 , 但 是 你 的 项 目 经 理 坚 持 认 为 用 户 看 不 到 更 新 的 内 容 。 这 种 担心 是 有 道理 的 ,你 需要 做 点 什么 
来 进行 验证 。 

解决 方法 很 简单 。 请 记 住 ， 使 用 当前 的 缓存 策略 时 ， 浏 览 器 总 是 通过 服务 器 验证 HTML 文 
档 的 新 鲜 度 。 你 可 以 在 HTML 中 做 一 个 小 的 更 改 ， 这 不 仅 会 触发 它 自 身 的 再 次 下 载 ， 还 会 触发 
再 次 下 载 修改 后 的 资源 。 为 此 ， 只 需要 向 CSS 或 JavaScript 的 引用 添加 一 个 查询 字符 串 。 如 果 需 
要 强制 CSS 更 新 ， 则 可 以 将 CSS 的 <1ink> 标 签 引 用 更 新 为 如 下 内 容 ( 更改 用 粗 体 标识 ): 


<link rel="stylesheet" href="css/styles.min.css?v=2" type="text/css"> 


向 资源 添加 查询 字符 串 将 导致 浏览 器 再 次 下 载 资源 ， 因 为 资源 的 URL 已 经 发 生 了 变化 。 
HTML 中 的 这 段 更 改 上 传 到 服务 器 后 , 缓存 中 有 旧版 本 styles.min.css 的 网 站 访问 者 , 现在 将 收 到 
新 版 本 的 styles.min.css。 这 个 方法 可 以 使 任何 资源 失效 ， 包 括 JavaScript 和 图 像 。 

你 可 能 会 认为 这 个 解决 方法 很 老 套 。 当 你 需要 确保 某 些 东西 不 会 被 缓存 , 但 又 不 想 自己 负责 
文件 的 版 本 控制 时 , 这 是 权宜 之 计 。 解决 这 个 问题 的 更 简便 方法 是 , 使 用 服务 器 端 语言 (如 PHP ) 
在 更 新 文件 时 自动 处 理 这 个 问题 。 代 码 清单 10-5 显示 了 处 理 此 问题 的 一 种 方法 。 
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代码 清单 10-5 PHP 中 的 自动 缓存 验证 


创建 styles .min.css 的 MD5 散 列 。 
这 个 值 基于 文件 内 容 ， 是 唯一 的 


<?php S$csSsVersion = md5_file("css/styles.min.css"); ?> 
<link rel="stylesheet" href="css/styles.min.css?v=<?php echo($cssVersion); ?>" 
人 将 散 列 字符 串 添加 
到 查询 字符 串 中 


这 个 解决 方案 可 以 工作 得 很 好 ,因为 file_mg5 函数 会 根据 文件 的 内 容 生 成 一 个 MD5 散 列 。 
如 果 文 件 从 未 更 改 ， 则 散 列 值 保 持 不 变 。 但是， 如 果 文 件 中 哪怕 只 有 1 字 节 发 生 了 更 改 ， 散 列 就 
会 更 改 。 

当然 , 你 可 以 用 其 他 方式 实现 这 一 点 。 可 以 使 用 PHP 语言 的 filemtime 函数 检查 文件 的 最 
后 修改 时 间 , 并 使 用 其 返回 值 。 也 可 以 编写 自己 的 版 本 控制 系统 。 关键 是 , 无 论 你 使 用 什么 语言 ， 
都 有 工具 可 以 为 你 自动 化 实现 。 


2. 使 图 像 和 其 他 媒体 文件 失效 

有 时 间 题 不 在 于 CSS 或 JavaScript， 而 在 于 图 像 等 媒体 文件 。 可 以 使 用 前 面 解释 的 查询 字符 
串 方 法 ,但 更 明智 的 选择 可 能 是 指向 一 个 新 的 图 像 文件 。 

如 果 运 行 的 是 Weekly Timber 这 样 的 小 网 站 ,那么 使 用 查询 字符 串 技巧 与 否 并 没有 多 大 区 别 。 
但 是 ， 如 果 你 的 网 站 使 用 内 容 管理 系统 (CMS )， 则 指向 一 个 全 新 的 文件 是 避免 缓存 问题 的 最 简 
单方 法 。 上 传 一 个 新 的 图 像 ，CMS 就 会 指向 它 。 以 前 从 未 被 用 户 缓存 过 的 新 图 像 URL 将 反映 在 
HTML 中 ， 并 立即 对 用 户 可 见 。 

我 们 在 缓存 方面 的 探索 已 结束 , 下面 开始 学 习 CDN 托管 资源 , 并 了 解 它们 如 何 提升 网 站 性 能 。 


10.3 使 用 CDN 资源 


前 一 节 简 要 介绍 了 CDN 及 其 对 缓存 的 影响 。 但 我 们 没有 深入 探讨 CDN 如 何 提升 网 站 性 能 。 
本 节 将 介绍 承载 常用 JavaScript 和 CSS 库 的 CDN, 以 及 它们 可 以 提供 的 好 处 ,然后 解释 如 何在 CDN 
失败 时 回 退 到 这 些 库 的 本 地 托管 副本 ， 以 及 如 何 使 用 子 资源 完整 性 验证 所 引用 资源 的 真实 性 。 


10.3.1 ”使 用 CDN 托 管 资源 


CDN 可 以 在 全 球 分 发 诸如 JavaScript 和 CSS 文件 之 类 的 资源 ,并 基于 地 理 位 置 将 它们 提供 给 
临近 的 用 户 ， 以 此 提升 性 能 。 这些 资源 托管 在 源 服务 器 上 ,然后 分 发 到 最 接近 潜在 最 终 用 户 的 服 
务 器 。 这 些 服 务 嚣 称 为 边缘 服务 器 。 

尽管 CDN 是 一 种 综合 性 服务 ， 你 可 以 将 其 放 在 服务 器 前 以 提供 和 缓存 内 容 ， 但 这 些 服务 的 
成 本 不 等 〈( 从 免费 到 高 昂 )。 本 书 不 会 介绍 它们 不 断 变化 的 特点 和 产品 ， 而 是 只 介绍 托管 常用 库 
(你 可 以 链接 到 这 些 库 ， 以 避免 从 自己 的 服务 器 提供 这 些 内 容 ) 的 CDN 的 好 处 。 这 些 服务 是 免费 
提供 的 ， 可 以 提高 网 站 性 能 ， 而 且 几 乎 不 费 吹 灰 之 力 。 
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1. 引用 CDN 资源 


<script src="js/jquery.min.js"></script> 


可 以 将 这 个 <script> 标 签 的 src 属性 更 改 为 指向 由 MaxCDN 人 免费 提供 


的 库 : 


使 用 CDN 托管 资源 非常 简单 。 jQuery 就 是 CDN 托管 资源 的 一 个 很 好 的 例子 。 jQuery 的 开发 
人 员 通 过 MaxCDN (一 种 快速 CDN 服务 ) 提供 该 资源 的 CDN 托管 版 本 。Weekly Timber 网 站 使 
用 jQuery v2.2.3 的 本 地 副本 。 打 开 网 站 根 文件 夹 中 的 index.html， 并 找到 包含 


jQuery 的 行 : 


的 CDN 托管 版 本 


<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> 


现在 有 什么 变化 ? 这 对 你 有 什么 帮助 ? 我 可 以 用 一 大 段 文字 来 讲解 CDN 如 何 更 快 地 传输 资 
源 , 以 及 与 从 Weekly Timber 所 在 的 共享 主机 提供 服务 相 比 延迟 低 了 多 少 , 但 是 我 选择 用 图 10-14 


来 直观 地 展现 这 些 内 容 。 
jQuery 加 载 时间 : CDN 与 共享 主机 
(数值 越 低 越 好 ) 
250 ms 
200 ms 
150 ms 
100 ms 
S0 ms 
0ms 
Google cdnjs MaxCDN jsDelivr ASP.NET Shared 
CDN CDN host 
图 10-14 jQuery 在 几 个 CDN 与 低 成 本 共享 主机 环境 中 的 加 载 时 间 和 


ria 
#3 


TTFB 


在 TTFB 和 总 加 载 时 间 两 方面 ， 0 CDN 都 比 托管 Weekly Timber 的 低 成 本 共享 主机 更 
有 能 力 。 这 个 测试 中 需要 注意 两 点 : 它 是 在 美国 上 中 西部 的 千 兆 光纤 连接 上 完成 的 ， 而 共享 主机 
在 西海 岸 运行 。 因 此 不 要 将 这 个 人 CDN 速度 的 综合 评估 。 你 必须 自己 进行 测试 。 然 而 ， 
尽管 如 此 ， 好 处 也 是 显而易见 的 。 现 在 你 可 能 意识 到 了 CDN 带 来 的 一 些 好 处 〈 除非 你 的 网 站 背 


它们 提供 了 速度 和 便利 。 


后 有 令 人 难以 置信 的 基础 设施 )。 尽管 如 此 ， 即 使 是 企业 应 用 ,也 会 使 用 CDN 托管 的 资源 ,因为 


CDN 带 来 的 好 处 不 仅 限于 速度 。CDN 还 为 你 管理 资源 的 缓存 ， 让 你 无 须 担心 这 方面 。CDN 
将 在 需要 时 使 资源 失效 ， 从 而 省 去 了 更 新 代码 的 麻烦 。 此 外 ， 如 果 像 jQuery 这 样 的 CDN 资源 被 
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广泛 使 用 , 并 且 用 户 在 访问 你 的 网 站 之 前 访问 过 使 用 相同 资源 的 网 站 , 那么 它 很 可 能 已 经 在 该 用 
户 的 缓存 中 了 。 这 意味 着 页 面 的 总 加 载 时 间 较 得。 免费 提升 了 性 能 ! 


2. 不 仅仅 是 jQuery 
你 不 只 是 在 使 用 jQuery, 也 许 你 根本 就 没有 使 用 jQuery。 许多 CDN 都 为 你 提供 了 各 种 资源 ， 

而 不 仅仅 是 某 一 个 流行 的 库 。 以 下 是 为 你 提供 各 种 资源 的 简短 的 CDN 列表 。 

口 cdnjs 是 一 个 托管 了 几乎 所 有 流行 的 (或 不 那么 流行 的 ) 库 的 CDN。 它 提供 了 干净 的 界面 ， 

使 你 能 够 搜索 任何 可 以 想到 的 常用 CSS 或 JavaScript 资源 ,例如 广泛 使 用 的 MVCOMVVM 

框架 、jQuery 插件 ， 或 项 目 所 依赖 的 任何 其 他 东西 。 

口 jsDelivr 是 另 一 个 类 似 于 cdnjs 的 CDN。 如 虹 cdnjs 没有 提供 你 想 要 的 内 容 , 请 尝试 在 这 里 

搜索 。 

口 Google CDN 涵盖 的 库 比 cdnjs 或 jsDeliv 少 得 多 ， 但 它 确实 提供 了 流行 的 库 (如 Angular 

和 其 他 库 )。 在 我 的 测试 中 ， 这 是 最 快 的 CDN。 

口 ASPNET CDN 是 微软 的 CDN。 它 比 cdnjs 或 jsDelivr 涵盖 的 库 少 , 但 比 Google CDN 上 略 胜 
一 筹 。 在 我 的 测试 中 ， 这 是 最 慢 的 选择 ， 但 是 仍然 比 我 的 共享 主机 快 很 多 ， 这 使 得 它 成 
为 一 个 可 行 的 选择 。 

如 果 你 打算 为 所 有 的 公共 库 引 用 CDN ， 我 有 一 条 建议 : 尽 可 能 少 使 用 不 同 的 CDN。 你 指向 

的 每 个 新 CDN 主机 都 将 引发 另 一 个 DNS 查询 , 这 可 能 会 增加 延迟 。 如 果 你 的 所 有 资源 都 可 以 在 

一 个 CDN 上 找到 ， 请 使 用 该 CDN。 如 果 一 个 CDN 就 能 胜任 ， 请 不 要 指向 三 四 个 主机 。 

另 一 个 建议 是 : 如 果 你 使 用 的 库 (如 Modernizr 或 Bootstrap ) 可 以 配置 为 提供 该 库 功能 的 特 

定 部 分 ， 请 配置 你 自己 的 构建 ， 而 不 要 指向 CDN 上 的 整个 库 。 有 时 候 ， 配 置 一 个 较 小 的 构建 并 

将 其 托管 在 自己 的 服务 器 上 ， 比 从 CDN 引用 完整 的 构建 要 快 。 理 清 你 的 需求 ， 并 比较 哪 种 方法 

更 好 。 

接 下 来 深入 探讨 CDN 发 生 故 障 时 会 发 生 什 么 ， 以 及 如 何 处 理 这 一 不 太 可 能 发 生 的 事件 。 


10.3.2 ”CDN 发 生 故 障 怎么 办 


我 看 到 的 对 CDN 最 大 的 批评 也 许 是 :“ 如 果 CDN 发 生 故 障 ， 该 怎么 办 ? ”尽管 有 些 自 鸣 得 
意 的 人 很 快 就 会 驶 斥 说 这 种 情况 不 太 可 能 发 生 (我 自己 也 犯 过 这 种 错误 )， 但 确实 发 生 过 这 种 情 
况 。 与 任何 服务 一 样 ，CDN 实际 上 无 法 保证 100% 的 正常 运行 时 间 。 它 们 在 大 多 数 情况 下 是 可 用 
的 ， 但 服务 中 断 可 能 而 且 确 实 会 发 生 。 

然而 ， 比 服务 中 断 更 可 能 发 生 的 是 网 络 被 配置 为 阻塞 特定 主机 。 这 些 网 络 可 以 是 安全 意识 强 
的 公司 、 公 共 设 施 、 军 事 组 织 ， 甚 至 是 封锁 整个 域名 ( 作为 互联 网 审查 工作 的 一 部 分 ) 的 政府 。 
需要 为 应 对 这 些 情况 做 好 规划 。 

可 以 使 用 一 个 简单 的 JavaScript 函数 ， 回 退 到 资源 的 本 地 副本 。 代 码 清单 10-6 显示 了 一 个 回 
退 加 载 程序 函数 ,可 以 将 该 函数 放 在 Weekly Timber 网 站 的 index.html 中 ,以 便 在 CDN 托管 的 库 
加 载 失败 时 提供 回 退 副本 。 
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代码 清单 10-6 ”可 重用 的 回 退 脚本 加 载 融 


通过 检查 目标 库 对 象 是 否 如 果 测 试 对 象 未 定 
<script> 未 定义 来 检查 其 是 否 存 在 义 , 则 创建 一 个 新 的 
function fallback(missingobj，fallbackUrl) { <script> 回 退 元 素 
将 回 退 脚 本 的 if(typeof(tmissingobj) === "unaefined"){ 
定位 设置 为 另 响 Var fallbackScript = document.createElement ("script"); 
一 个 URL fallbackScript.src = fallbackUrl; 
document .body.appendChild(fallbackScript); 
. ; 通过 将 <script> 回 退 元 素 添 加 
re 到 body 的 末尾 来 加 载 资源 
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> 
<script> 
fallback (window.jQuery, "js/jquery.min.js"); 
</script> 回 退 脚本 指定 了 要 测 
jQuery 的 CDN 引用 试 的 对 象 , 以 及 回 退 肢 


本 指向 的 相对 URL 

要 测试 这 一 点 ,可 以 禁用 网 络 连接 , 使 页 面 无 法 访问 CDN 资源 , 或 者 将 URL 更 改 为 虚假 的 

内 容 。 这 样 做 时 ， 重 新 加 载 页 面 并 检查 Network 面板 ,将 会 看 到 本 地 托管 资源 作为 回 退 加 载 ， 如 
10-15 所 示 。 


资源 加 载 失败 
Name Method \ Status Size Time Cache-Control Timeline- Start Time 150s 200s 250s 
| jquery-2.2.3.minjs GET 404 0B 106 ms 
_ jquery.min.js GET 200 es KB 2.00s public, max-age=2592000 
回 退 资源 


图 10-15 “Chrome 中 的 Network 面板 显示 CDN 资源 加 载 失 败 ， 页 面 返回 本 地 托管 版 本 


这 能 够 起 作用 是 因为 <script> 标 签 的 性 质 。 多 个 <script> 标 签 按照 它们 在 标记 中 定义 的 顺 
序 解析 和 执行 ， 每 个 标签 都 要 等 待 前 一 个 标签 完成 。 只 有 在 前 面 那个 引用 jQuery 的 CDN 版 本 的 
标签 加 载 失 败 时 ， 才 会 运行 尝试 加 载 回 退 的 <script> 标 签 。 

当然 , 这 并 不 局 限于 jQuery。 要 有 条 件 地 加 载 回 退 ,请 测试 JavaScript 库 的 全 局 对 象 。 例 如 ， 
如 果 需 要 回 退 到 本 地 托管 的 Modemizr 版 本 ， 则 可 以 使 用 类 似 下 面 的 fallback 函数 : 


fallback (window.Modernizr, "js/modernizr.min.js"); 


接 下 来 介绍 如 何 通过 子 资源 完整 性 验证 CDN 资源 的 完整 性 ， 这 样 你 就 能 知道 请 求 的 是 所 期 
望 的 资源 。 


10.3.3 ”使 用 子 资源 完整 性 验证 CDN 资 源 
从 网 上 下 载 软件 时 ， 可 能 会 在 下 载 链接 附近 看 到 一 个 校 验 和 字符 串 。 校 验 和 是 一 种 签名 ,可 
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以 帮助 你 确保 下 载 的 文件 是 程序 发 行者 希望 你 运行 的 文件 。 这 样 做 是 为 了 你 自己 的 安全 , 以免 你 
在 无 意 中 运 行 恶意 代码 。 如 果 文 件 的 校 验 和 与 发 布 服 务 器 提供 的 校 验 和 不 匹配 , 则 不 能 安全 地 使 
用 该 文件 。 

现在 , 在 某 些 浏览 器 中 , 可 以 在 HTML 中 执行 相同 的 完整 性 检查 , 以 确保 <script> 或 <Link> 
元 素 包 含 的 CDN 资源 是 发 布 者 希望 你 使 用 的 。 这 个 过 程 称 为 子 资源 完整 性 ( Subresource Integrity )， 
如 图 10-16 所 示 。 


1. 用 户 从 CDN 
请 求 资源 
[FE 
el 
hss 
GET https://cdn.com/jaquery.min.js Ee 2. CDN 验 证 资源 安全 性 
下 QQ 人 人 人 人 并 响应 


局 一 

资源 校 验 否 

和 是 否 符合 资源 不 会 被 使 用 
用 户 预期 ? 


图 10-16 使 用 子 资源 完整 性 验证 资源 的 过 程 。 用 户 从 CDN 请 求 资 源 ， 而 资源 安全 性 
通过 校 验 和 的 验证 过 程 来 确定 。 如 果 资 源 安全 就 会 被 使 用 ， 否 则 将 被 丢弃 
尽管 这 个 功能 不 会 影响 网 站 性 能 ， 但 它 确 实 为 用 户 提 供 了 保护 ( 防止 下 载 被 算 改 的 资源 )， 
值得 在 使 用 CDN 资源 的 上 下 文中 引入 。 
1. 使 用 子 资源 完整 性 
子 资源 完整 性 的 语法 使 用 <script> 或 <1ink> 标 签 上 的 两 个 属性 来 引用 另 一 个 域 上 的 资源 。 
integrity 属性 指定 了 用 于 生成 预期 校 验 和 的 散 列 算法 ( 例如 MD5 或 SHA-256 )， 以 及 校 验 和 
值 本 身 。 图 10-17 显示 了 这 个 属性 值 的 格式 。 
integrity="sha256-a23g1Nt4dtEYOj7bR+vVvTuU7+T8VP13humZFBJNIYOEJO=" 
散 列 算法 校 验 和 值 
图 10-17 integrity 属性 的 格式 。 该 值 以 散 列 算法 ( 本 例 中 为 SHA-256 ) 开始 ， 
后 跟 引 用 资源 的 校 验 和 值 


第 二 个 属性 是 crossorigin，CDN 资源 的 值 始终 为 anonymous， 以 指示 资源 不 需要 任何 


[ou 
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用 户 凭据 就 可 以 访问 。 在 jquery.minjs 2.2.3 版 的 <script> 标 签 上 组 合 使 用 这 两 个 属性 时 ， 将 如 
下 所 示 : 


<script src="https://code.jquery.com/jquery-2.2.3.min.js" 
integrity="sha256-a23g1Nt4dtEY0j7bR+VTuU7+T8VP13humZFBJNIYoEJoO=" 
crossorgin="anonymous"> 

/BCript> 


在 兼容 的 浏览 器 中 ， 当 CDN 资源 的 校 验 和 与 浏览 器 的 期 望 匹配 时 ,一切 都 将 正常 工作 。 如 
果 校 验 和 匹配 失败 , 你 将 在 控制 台中 看 到 一 个 错误 消息 , 它 警告 你 受 影响 的 资源 未 通过 完整 性 检 
查 。 在 这 种 情况 下 ， 资 源 将 不 会 被 加 载 。 但 是 ， 如 果 指 定 了 上 一 节 中 显示 的 回 退 机 制 ， 则 会 加 载 
本 地 副本 。 

并 非 所 有 浏览 右 都 支持 这 种 验证 方法 ,但 那些 支持 它 的 浏览 器 ( 如 Firefox、Chrome 和 Opera ) 
得 到 了 广泛 使 用 。 不 支持 子 资源 完整 性 的 浏览 器 将 忽略 integrity 和 crossorigin 属性 ， 并 
加 载 引 用 的 资源 。 


2. 生成 自己 的 校 验 和 

一 些 CDN 提供 的 代码 片段 已 经 为 你 设置 了 子 资源 完整 性 , 但 这 还 不 是 标准 做 法 。 你 可 能 需 
要 生成 自己 的 校 验 和 ， 最 简单 的 方法 是 使 用 校 验 和 生成 器 ， 但 是 如 果 你 更 倾向 于 自己 生成 校 验 
和 ， 则 可 以 依赖 openssl 命令 行 实用 程序 。 要 为 文件 生成 SHA-256 校 验 和 ， 请 在 命令 行使 用 
以 下 语法 : 


openssl dgst -sha256 -binary yourfile.js | openssl base64 -A 


这 条 命令 将 为 你 提供 的 文件 生成 校 验 和 ， 并 将 其 输出 到 屏幕 。 如 果 运 行 的 是 Windows 系统 ， 
则 可 以 下 载 OpenSSL 二 进 制 文件 或 使 用 certutil 命令 。 在 这 两 种 情况 下 ， 你 最 好 使 用 在 线 工 
具 ， 因 为 它们 更 方便 ， 并 能 生成 相同 的 输出 。 如 果 决 定 生成 自己 的 校 验 和 ， 请 使 用 可 靠 的 散 列 算 
法 ， 如 SHA-256 或 SHA-384。MD5 或 SHA-1 这 样 的 算法 对 于 今天 的 需求 来 说 不 够 安全 。 

下 一 节 将 学 习 如 何 使 用 资源 提示 微调 网 站 上 的 资源 传输 ， 它 可 用 于 HTML 或 HTTP 头 。 


10.4 ”使 用 资源 提示 


随 着 浏览 器 的 成 熟 ， 一些 特性 被 添加 到 了 其 中 ,以 帮助 向 用 户 提供 资源 。 这 些 特 性 称 为 资源 
提示 ， 它 是 由 HTML <1ink> 标 签 或 Link HTTP 响应 头 驱动 的 行为 集合 ， 这 些 指令 会 执行 诸如 
DNS 预 取 、 预 连接 到 其 他 主机 、 预 取 和 预 加 载 资源 ， 以 及 预 浑 染 页 面 等 任务 。 本 节 将 介绍 这 些 
技术 及 其 使 用 过 程 中 的 陷阱 。 


10.4.1 使 用 preconnect 资 源 提 示 


正如 第 1 章 中 所 说 ， 应 用 程序 性 能 差 的 一 个 原因 是 延迟 。 限 制 延 迟 影响 的 一 种 方法 是 利用 
preconnect 资源 提示 ， 该 提示 可 以 连接 到 托管 浏览 器 尚未 开始 下 载 的 资源 的 域 。 
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当 这 个 提示 用 于 指向 访问 当前 页 面 的 主机 时 ， 并 不 能 提供 好 处 。 这 样 做 不 能 提高 性 能 ， 因 为 
加 载 文档 并 发 现 preconnect 资源 提示 时 ， 对 所 请 求 文档 的 DNS 查询 已 经 发 生 。 

当 你 引用 不 同 域 (如 CDN ) 上 的 资源 时 ，preconnect 最 有 效 。 因 为 HTML 文档 是 由 浏览 
器 自 上 而 下 读 取 的 ， 所 以 浏览 器 发 现 对 资源 的 引用 时 , 会 建立 到 资源 域 的 连接 。 如 果 此 资源 引用 
位 于 <script> 标 签 ( 例如 页 脚 )， 则 在 页 眉 中 放置 preconnect 资源 提示 ， 可 以 为 浏览 器 连接 
到 托管 资源 的 域 提 供 一 个 良好 的 开端 。 

Weekly Timbe 网 站 有 一 个 对 托管 在 code.jquery.com 上 的 jQuery 库 的 引用 。 可 以 使 用 <1ink> 
标签 ， 在 早期 建立 到 资源 所 在 域 的 连接 : 


<link rel="preconnect" href="https://code.jquery.com"> 


或 者 也 可 以 将 Web 服务 器 配置 为 将 Link 响应 头 与 HTML 文档 一 起 发 送 : 


Link: <https://code.jquery.com>; rel=preconnect 


这 两 种 方法 可 以 完成 相同 的 任务 ,但 实现 难度 不 同 。 在 HTML 中 使 用 <1ink> 标 签 几乎 不 费 
吹 灰 之 力 。 而 添加 Link 响应 头 就 较为 复杂 ,但 资源 提示 将 比 在 文档 中 更 早 被 发 现 , 我 在 index.html 
中 测试 了 这 两 种 方法 ， 以 指示 浏览 器 尽快 建立 到 code.jquery.com 的 连接 。 图 10-18 显示 了 这 个 测 
试 对 从 CDN 加 载 jQuery 的 影响 。 


jQuery 加 载 时 间 : preconnect 资 源 提示 的 效果 


(数值 越 低 越 好 ) 

500 ms 
没有 preconnect 

400 ms 在 HTML 中 使 用 preconnect 
在 HTTP 头 中 使 用 preconnect 

300 ms 

200 ms 

100 ms 

0ms 
HTTP HTTPS 


图 10-18 在 HTTP 和 HTTPS 上 从 CDN 加 载 jQuery 时 ，preconnect 资源 提示 的 效果 

这 种 技术 有 可 能 提高 网 站 性 能 , 但 你 应 当 一 如 既往 地 执行 自己 的 测试 , 以 确定 对 具体 情况 的 
好 处 ,尽管 Firefox 和 Chromium 浏览 器 ( Chrome、Opera 和 Android 浏览 器 ) 都 支持 preconnect， 
但 preconnect 并 未 得 到 全 面 的 支持 ， 因 此 并 非 所 有 用 户 都 能 感受 到 它 带 来 的 好 处 。 
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dns-prefetch 资源 提示 
dns-prefetch 是 一 种 效果 略 差 但 支持 范围 更 广 的 资源 提示 。 它 的 用 法 类 似 , 唯一 区 别 是 
在 rel 属性 或 Link 头 部 中 不 使 用 preconnect 关键 字 ， 而 是 使 用 dns-prefetch。 这 个 资 
源 提 示 不 会 执行 到 指定 域 的 完全 连接 , 而 是 执行 DNS 查询 以 解析 域名 的 IP 地址。 我 在 自己 的 
测试 中 使 用 这 个 头 部 时 ,没有 得 到 任何 好 处 , 但 是 在 延迟 比较 严重 的 情况 下 , 它 可 以 提供 一 些 
好 处 。 


接 下 来 将 讨论 prefetch 和 preload 资源 提示 的 性 能 增强 ， 以 及 如 何 使 用 它们 更 快 地 在 网 
站 上 加 载 资源 。 
10.4.2 ”使 用 prefetch 和 preload 资 源 提 示 


下 载 特定 资源 时 包含 两 个 资源 提示 : prefetch 和 preload。 两 者 做 的 事情 相似 , 但 又 有 明 
显 的 不 同 。 下 面 先 介绍 prefetcho 


1. 使 用 prefetch 资源 提示 

在 功能 强大 的 浏览 器 中 , prefetch 告诉 浏览 器 下 载 特定 资源 , 并 将 其 存储 到 浏览 器 缓存 中 。 
这 个 资源 提示 可 以 像 请 求 那样 , 用 于 预 取 位 于 同一 页 面 上 的 资源 ; 或 者 你 也 可 以 对 用 户 下 一 步 可 
能 访问 的 页 进行 猜测 ， 并 请 求 那个 页 面 的 资源 。 使 用 第 二 种 方法 时 要 特别 小 心 ， 因 为 它 可 能 会 迫 
使 用 户 下 载 不 必要 的 资源 。prefetch 的 语法 与 preconnect 相同 ; 唯一 的 区 别 是 <1ink> 标 签 
的 rel 属性 中 的 值 : 


<link rel="prefetch" href="https://code.jquery.com/jquery-2.2.3.min.js" as="script"> 


它 也 可 以 在 HTTP 头 中 指定 ， 其 使 用 方式 与 breconnect 基本 相同 : 


Link: <https://code.jquery.com/jquery-2.2.3.min.js>; rel=prefetch; as=script 


例如 ,如 前 所 示 , 你 可 以 在 index.html 中 针对 jQuery 包含 这 个 资源 提示 ,以 改进 Weekly Timber 
主页 的 加 载 速度 。 这 样 做 可 以 将 页 面 的 加 载 时 间 缩 短 近 20%， 如 图 10-19 所 示 。 
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页 面 总 加 载 时 间 : 预 取 jQuery 的 效果 
(数值 越 低 越 好 ) 


1000 mas 斑 
国 wear 


| | 使 用 疡 到 


800 ms 


600 ms 


400 ms 


200 ms 


0 ms 


10-19 ” 预 取 与 不 预 取 jQuery 时 Weekly Timber 主页 的 加 载 时 间 。 使 用 Chrome 
的 Regular 4G 网 络 节 流 配置 


如 你 所 见 ， 这 种 情况 下 使 用 prefetch 有 一 个 明显 的 好 处 。 因 为 包含 jQuery 的 <script> 元 
素 位 于 页 面 底部 ， 所 以 在 页 面 几乎 解析 完 HTML 之 前 ， 它 不 会 被 发 现 和 下 载 。 通 过 在 HTML 的 
<head> 中 添加 prefetch 提示 ,浏览 器 可 以 在 下 载 文件 时 获得 一 个 良好 的 开始 。 到 找到 对 jQuery 
的 引用 时 ，prefetch 提示 已 经 将 其 捕获 并 存储 在 浏览 器 缓存 中 ， 从 而 缩短 了 网 站 的 加 载 时 间 。 


prefetch 测试 提示 
测试 prefetch 可 能 很 灰 手 。 如 果 使 用 Chrome 并 在 Network 面板 中 选中 Disable Cache 
2 则 prefetch 可 能 导致 性 能 损失 ， 因 为 预 取 的 资源 将 下 载 两 次 。 要 查看 和 衡量 其 好 
需要 清除 并 重新 启用 缓存 ， 并 使 用 未 命中 的 缓存 来 监视 性 能 


prefetch 是 有 限制 的 ， 浏 览 器 不 能 保证 它 会 按照 指定 的 方式 预 取 资源 。 每 个 浏览 顺 都 有 自 
己 的 prefetch 规则 , 因此 请 注意 , 浏览 顺 可 能 并 不 总 是 遵守 资源 提示 。 这 个 特性 广 受 支 持 , 但 
是 就 像 任 何不 受 支 持 的 HTML 特性 一 一 样 ， 不 理解 它 的 浏览 器 将 忽略 它 。 这 确保 了 不 兼容 的 浏览 

也 能 够 正常 工作 。 


2. 使 用 preload 资源 提示 

preload 资源 提示 与 prefetch 非常 相似 ， 只 是 它 保证 将 下 载 指定 的 资源 。 其 行为 类 似 于 
prefetch， 但 没有 歧义 。 不 过 与 brefetch 不 同 ,浏览 器 对 preload 的 支持 较 少 ， 撰 写本 书 
英文 版 时 ， 只 有 基于 Chromium 的 浏览 器 支持 该 功能 。 

你 可 以 猜 到 ，preload 的 使 用 方式 与 先前 的 资源 提示 相同 : 


<link rel="preload" href="https://code.jquery.com/jquery-2.2.3.min.js" as="script"> 
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在 HITP 头 中 的 使 用 方式 也 类 似 : 


Link: <https://code.jquery.com/jquery-2.2.3.min.js>; rel=preload; as=script 


preload 的 主要 区 别 在 于 ， 你 可 以 使 用 as 属性 描述 请 求 的 内 容 类 型 。 script、 style、 
font 和 image 的 值 可 以 分 别 用 于 JavaScript、CSS、 字 体 和 图 像 。 此 属性 是 完全 可 选 的 , 但 省 略 
它 是 不 利 的 ， 因 为 如 果 没 有 as ， 浏 览 絮 将 下 载 该 资源 两 次 。 

需要 简单 说 明 一 点 : 名 为 服务 器 推送 的 HTTP/2 特性 在 一 些 HTTP/2 实现 中 使 用 了 相同 的 
HTTP 头 语 法 ， 实 现在 HTML 文档 响应 时 抢先 向 用 户 “ 推 送 ” 一 个 资源 。 此 功能 及 其 性 能 优势 将 
在 第 11 章 详细 介绍 。 

在 之 前 的 示例 中 ， 我 们 使 用 preload 获取 jQuery 的 CDN 副本 ， 就 像 在 前 面 的 prefetch 
部 分 中 所 做 的 那样 。preloaa 的 性 能 优势 与 prefetch 基本 相同 ， 只 是 你 必须 依靠 兼容 的 浏览 
器 满足 preload 请 求 。 图 10-20 显示 了 Chrome Network 面板 中 的 preload 提示 。 


Name Method Status Domain Size Time Timeline — Start Time 
localhost GET 200 localhost 21KB 26ms 
ge ge , 使 用 preload 资 源 
Uery-2.2.3.min.js GET 200 code.jquery.com 34.6KB 104 ms eS 
nt , id 提示 请 求 的 资源 
_ | css?family=Lato:40... GET 200 fonts.googleapis.com 933B 106 ms 
_ styles.min.css GET 200 localhost 45KB 33ms 


| jquery-2.2.3.min.js GET 200 code.jquery.com 0B 106 ms 4 一 一 人 


图 10-20 ”Network 面板 显示 jquery-2.2.3.min.js 通过 preload 资源 提示 加 载 。jQuery 
库 的 第 一 行 来 自 preload 提示 ， 而 第 二 行 是 在 从 缓存 中 检索 项 时 发 生 的 。 
注意 第 二 行 jquery-2.2.3.min.js 中 的 大 小 是 0 字 节 
与 其 他 资源 提示 一 样 , 应 该 始终 在 添加 前 后 测试 页 面 性 能 。 如 果 需 要 尽 可 能 广泛 的 浏览 器 支 
持 ， 并 且 必 须 在 preload 和 prefetch 之 间 进 行 选择 ， 请 选择 prefetch。 如 果 浏 览 絮 支持 没 
有 那么 重要 ， 并 且 和 希望 无 论 怎样 请 求 都 能 够 抢先 加 载 内 容 ， 请 选择 preloag。 
结束 本 节 前 ， 我 们 将 研究 prerender 资源 提示 ， 以 及 如 何在 用 户 导 航 到 整个 页 面 之 前 ， 使 
用 它 来 泻 染 整 个 页 面 。 
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与 前 几 章 不 同 , 本 章 在 几 个 看 似 不 相关 的 概念 中 曲折 前 进 , 但 它们 都 集中 于 同一 目标 : 帮助 
你 微调 网 站 的 资源 传输 。 下 面 回顾 本 章 涵盖 的 内 容 。 
口 当 你 应 用 过 多 压缩 ， 或 压缩 已 经 在 内 部 压缩 的 文件 类 型 时 ， 配 置 不 当 的 压缩 可 能 会 增加 
用 户 的 延迟 。 
口 Brotli 压缩 是 一 种 新 的 算法 ， 相 较 gzip 有 一 些 优点 ,但 也 会 在 其 最 高 设置 下 增加 延迟 。 这 
种 压缩 算法 的 未 来 看 起 来 很 光明 ， 目 前 享有 不 错 的 浏览 器 支持 。 
口 使 用 cache-control 头 部 为 网 站 配置 缓存 行为 ， 能 够 提高 访问 者 回访 网 站 时 的 性 能 。 
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口 cache-Control 设置 会 造成 奖 固 的 缓存 ,我们 学 会 了 如 何在 使 用 新 内 容 更 新 网 站 时 使 绥 
存 的 资源 无 效 。 
口 使 用 托管 在 CDN 上 的 资源 可 以 缩短 网 站 的 总 体 加载 时 间 。 然 而 ， 有 了 时 这 些 服务 会 失败 ， 
所 以 最 好 提供 到 本 地 副本 的 回 退 ,这样 当 不 可 想象 的 情况 发 生 时 ， 用 户 就 不 会 陷入 困境 。 
口 使 用 CDN 托管 资源 意味 着 为 了 获得 更 好 的 性 能 ， 你 将 放弃 对 所 加 载 内 容 的 某 些 控制 , 但 
如 果 使 用 子 资源 完整 性 验证 这 些 资 源 的 完整 性 ， 则 不 必 牺牲 用 户 的 安全 。 
口 资源 提示 可 用 于 加 快 网 页 加 载 速度 、 微 调 特定 页 面 资源 的 传输 ， 以 及 预 泻 染 用 户 尚 未 访 
问 的 页 面 。 

下 一 章 将 研究 新 的 HTTP/2 协议 。 你 将 了 解 它 如 何 为 网 站 带 来 进一步 的 性 能 改进 ， 以 及 该 协 

议 将 对 你 的 优化 技术 产生 的 影响 。 


HTTP/2 未 来 展望 


本 章 内 容 

口 了 解 HTTP/1 的 历史 及 其 问题 

口 探索 HTTP/2 的 演变 史 

口 理解 HTTP/2 的 新 功能 : 请 求 多 路 复 用 、 头 部 压缩 

口 探讨 HTTP/1 优化 实践 和 HTTP/2 优化 实践 之 间 的 区 别 
口 使 用 服务 器 推送 加 快 页 面 关 键 资 源 的 传输 

口 优化 同一 服务 器 上 的 HTTP/1 和 HTTP/2 客 户 端 


Web 一 直 在 变化 。 多 年 来 ， 用 户 和 开发 人 员 一 直 被 HTTP/1 协议 的 限制 所 困扰 。 尽 管 开发 人 


员 一 直 在 从 这 个 “ 老 迈 ”协议 中 “榨取 ”最 后 一 点 性 能 ， 但 我 们 必须 接受 一 点 : 是 时 候 改 变 并 采 
用 HTTP/2 了 。 


本 章 将 介绍 HTTP/1 本 身 的 问题 以 及 HTTP/2 带 来 的 好 处 ， 例 如 请 求 多 路 复 用 和 头 部 压缩 ， 
还 将 说 明 这 些 好 处 如 何 解 决 HTTP/1 客户 端 /服务 器 端 交互 中 存在 的 问题 。 在 这 个 过 程 中 , 我 们 要 
使 用 Node 编写 一 个 小 型 HTTP/2 服务 器 ， 并 实际 看 到 这 些 好 处 。 

HTTP/2 不 仅 提供 了 成 本 更 低 的 请 求 和 压缩 头 ， 还 提供 了 一 种 名 为 “服务 需 推 送 ”( Server 
Push ) 的 可 选 功能 ， 该 功能 无 须 访客 主动 发 起 请 求 ， 即 可 向 他 们 发 送 特定 资源 。 巧 用 服务 器 推送 
会 加 快 网 站 的 加 载 和 泻 染 速度 。 你 将 会 了 解 到 该 功能 的 工作 原理 和 使 用 方法 。 

HTTP/2 还 会 影响 网 站 优化 方式 , 因此 本 章 将 介绍 如 何 调整 优化 实践 , 以 更 好 地 适应 HTTP/2 
连接 。 因 为 许多 访问 者 可 能 仍 在 使 用 采用 HTTP/1 的 浏览 器 ， 所 以 我 将 向 你 展示 一 个 概念 证 明 : 
如 何 从 同一 个 Web 服务 器 为 HTTP/1 和 HTTP/ 用 户 提供 最 佳 内 容 服务 。 现 在 让 我 们 开始 吧 ! 


11.1 理解 HTTP/2 的 必要 性 


由 于 HTTP/1 的 种 种 缺点 ， 所 以 催生 了 对 HTTP/2 的 需求 。HTTP/1 现在 是 一 种 遗留 的 协议 ， 
不 适合 处 理 现代 网 站 的 需求 。 要 知道 为 什么 需要 一 个 新 的 协议 ,我 们 需要 先 了 解 HTTP/1 中 国有 
的 问题 。 本 节 将 对 这 些 问 题 进 行 探讨 ， 并 说 明 HTTP/2 如 何 解决 它们 ， 然 后 在 Node 中 编写 一 个 
HTTP/2 服务 器 。 
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11.1.1 理解 HTTP/1 中 的 问题 


HTTP 起 源 于 1991 年 发 明 的 HTTP/0.9。 该 协议 最 初 是 为 一 个 更 简单 的 电子 文档 Web 而 设计 
的 ， 只 能 使 用 单一 方法 (GET )。 这 些 用 HTML 编写 的 文档 能 够 通过 销 点 标签 链接 到 其 他 文档 。 
HTTP/0.9 协议 很 好 地 实现 了 这 一 日 标 。 

随 着 时 间 的 推移 ,人 们 添加 了 两 个 具有 额外 功能 和 方法 ( 例如 提交 表单 数据 的 PosT ) 的 HTTP 
新 实现 。 其 版 本 号 是 v1.0 和 v1.1， 它 们 在 1996 年 标准 化 。 此 后 不 入， 大 多 数 浏 览 器 增加 了 对 其 
的 支持 。 

从 那 时 起 ,，HTTP/1 就 成 了 Web 的 主力 军 。 然 而 接 下 来 ，Web 从 提供 简单 的 HTML 文档 转变 
为 提供 复杂 的 网 站 和 应 用 程序 ， 如 图 11-1 所 示 。 
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图 11-1 1996 年 ( 左 ) 和 2016 年 ( 右 ) 的 《洛杉矶 时 报 》 主 页 


Web 复杂 度 的 日 益 提 升 ， 意 味 着 通过 更 高 质量 的 媒体 和 内 容 ， 用 户 可 以 获得 更 丰富 的 体验 。 
然而 问题 是 ， 自 从 第 一 个 Web 开发 人 员 敢 于 相信 “Web 不 仅仅 是 为 了 提供 静态 文本 文档 ”以 来 ， 
“内 容 的 复杂 性 ”和 “以 高 性 能 方式 提供 服务 的 能 力 ” 之 间 的 拉锯 战 一 直 在 加 剧 。 尽 管 开发 人 员 

已 经 想 出 了 巧妙 的 方法 来 解决 HTTP/1 中 常见 的 性 能 问题 ， 但 是 仍然 有 三 个 严重 的 问题 困扰 着 
HTTP 协议 : 队 首 阻塞 、 未 压缩 头 部 和 缺少 HITPS 的 授权 。 


1. 队 首 阻塞 

困扰 HTTP/1 客户 端 /服务 器 端 交互 的 最 大 问题 是 一 种 被 称 为 队 首 阻塞 的 现象 。 这 体现 在 
HTTP/1 协议 无 法 同时 处 理 超过 一 小 批 的 请 求 (通常 一 次 处 理 6 个 请 求 , 但 因 浏 览 器 而 导 ), 请 求 
按 接收 顺序 响应 , 在 初始 批 处 理 中 的 所 有 请 求 完成 之 前 , 无 法 开始 下 载 内 容 的 新 请 求 ， 如 图 11-2 
所 示 。 
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0s 0.5s 1.0s 1l.5s 2.0s 
index.html 


styles.min.css 
logo.svg 
jquery.min.js 


behaviors.min.js 
阳 寒 请求 一 、、 masthead.jpg 

CE | lato-bold.woff2 
[EE | icon-facebook.svg 


[| icon-twitter.svg 


时 间 


图 11-2 批 处 理 9 个 请 求 中 的 队 首 阻塞 问题 。 第 一 批 6 个 请 求 并 行 完成 ,但 在 第 一 批 
中 最 大 的 文件 ( masthead.jpg ) 完成 下 载 之 前 ， 其 余 批 次 无 法 开始 下 载 。 此 问 
题 可 能 导致 加 载 时 间 延 迟 


在 前 端 解决 这 个 问题 的 一 种 方法 是 拥 绑 文件 。 减 少 请 求 可 以 最 大 限度 地 减轻 队 首 阻塞 问题 的 
负面 影响 , 但 这 是 一 种 反 模 式 ， 因 为 当 捆 绑 内 容 的 一 部 分 发 生 更 改 时 ,必须 再 次 下 载 整 个 捆绑 资 
源 ， 而 不 是 只 下 载 已 更 改 的 部 分 。 

绕 过 这 个 请 求 限制 的 另 一 个 方法 是 , 使 用 一 种 名 为 域名 分 片 的 技术 。 这 种 技术 通过 跨 域 分 布 
请 求 绕 过 最 大 的 并 发 请 求 限制 。 有 了 两 个 域 提供 服务 ,就 可 以 同时 满足 两 倍 的 请 求 。 尽 管 这 项 技 
术 是 有 效 的 ,但 需要 大 量 的 时 间 和 经 费 投 入 。 并 不 是 每 个 组 织 都 适合 采用 它 。 

此 问题 在 服务 器 端 也 取得 了 一 些 进 展 。 例如 ,持久 的 HTTP 连接 (保持 活动 的 连接 ) 通过 重 
用 单个 连接 满足 多 批 请 求 ， 以 减轻 负载 。 然 而 这 种 方法 的 不 足 之 处 在 于 : 它 不 能 解决 队 首 阻塞 问 
题 。 一 种 名 为 HTTP 管道 的 技术 旨 在 通过 并 行 〈 而 不 是 批量 ) 满足 所 有 请 求 来 解决 这 个 问题 , 但 
是 它 的 实现 遇 到 了 巨大 的 挑战 ， 成 功 之 路 步履 维 艰 。 


2. 未 压缩 头 半 

我 们 知道 ， 从 Web 服务 器 请 求 资源 时 ， 头 部 会 伴随 着 Web 服务 器 的 请 求 和 响应 。 这 些 头 部 
信息 描述 了 资源 的 请 求 和 响应 的 许多 方面 ， 其 中 大 部 分 的 表达 方式 存在 元 余 。 

Cookie 请 求 头 就 是 一 个 很 好 的 例子 。cookie 通常 用 于 跟踪 用 户 会 话 ， 因 此 包含 会 话 ID 。 想 
象 一 下 ， 有 一 个 包含 60 个 资源 的 网 页 ， 每 个 资源 都 携带 一 个 会 话 ID 为 128 字 节 的 cookie。 每 1 
请 求 都 必须 向 服务 器 上 传 另 外 128 字 节 的 数据 , 以 表示 cookie 对 其 有 效 的 域 。 当 分 布 在 几 个 请 求 
中 时 ， 这 不 算 多 ， 但 是 想象 一 个 有 60 个 请 求 都 附加 了 这 个 cookie 的 页 面 。 客 户 机 必须 在 所 有 这 
些 请 求 中 ， 总 共 向 服务 器 发 送 7.5 KB 的 额外 数据 ， 如 图 11-3 所 示 。 
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©O 
请 求 cookie: 128 字 节 
[| 
分 布 在 60 个 请 求 中 各 服务 器 发 送 7.5 KB 
的 额外 数据 
图 11-3 ”一 个 会 话 ID 长 128 字 节 的 cookie 分 布 在 60 个 请 求 中 ， 总 共有 7.5 KB 的 额外 


数据 发 送 到 Web 服务 器 


这 种 情况 不 仅 会 在 请 求 头 中 发 生 ， 还 会 发 生 在 响应 头 中 ， 因 此 Web 服务 器 的 请 求 和 响应 中 
都 有 这 些 头 部 堆积 的 数据 。 

“服务 器 压 缩 不 能 解决 这 个 问题 四? ”经 过 之 前 的 学 习 ， 你 可 能 会 提出 这 样 的 问题 。 答 案 是 
明确 的 : 不 可 以 。 服 务 器 只 压缩 响应 体 ， 而 不 压缩 响应 头 。 尽 管 响应 体 无 疑 是 有 效 负载 中 最 大 的 
一 部 分 ， 但 响应 头 中 存在 的 未 压缩 数据 也 无 疑 是 值得 关注 的 。HTTP/1 未 能 解决 这 个 问题 ， 这 又 
成 为 那些 想 提 高 网 站 速度 的 Web 开发 人 员 的 另 一 个 困扰 。 


3. 不 安全 网 站 

HTTP/1 服务 器 不 需要 为 其 访问 者 实现 SSL， 虽 然 这 个 问题 在 本 质 上 不 一 定 是 性 能 问题 ， 但 
在 一 个 越 来 越 危险 的 节 界 里 ， 黑 客 经 党 窃取 数据 并 用 来 冒充 他 人 ,所 以 有 必要 保护 你 的 网 站 ， 以 
确保 为 访客 提供 隐秘 而 安全 的 网 页 浏览 体验 。 

因为 HTTP/1 不 要 求实 现 SSL, 所 以 实现 它 完全 是 可 选 的 。 如 果 安 全 措施 可 选 ， 人 们 很 可 能 
不 会 实施 。 除 非 被 迫 改 变 或 发 生 不 良 事件 ， 和 否则 人 们 不 会 改变 。 虽 然 在 首次 开发 HTTP 时 无 法 
预见 这 种 失败 ， 但 不 能 用 这 一 要 求 强 制 网 站 所 有 者 保护 其 网 站 的 安全 。 可 以 说 ， 用 户 隐 私 已 经 

HTTP/ 引起 的 问题 不 止 如 此 , 但 它们 是 应 当 关注 的 主要 问题 。 幸 运 的 是 ，HTTP/ 协议 中 内 
置 了 这 些 问 题 的 解决 方案 。 


11.1.2 ”通过 HTTP/2 解决 常见 的 HTTP/1 问题 


HTTP/2 并 不 是 凭空 出 现 的 。 早 在 2012 年 ，Google 开发 了 一 个 名 为 SPDY 的 协议 ， 以 解决 
HTTP/1 的 局 限 性 。 编 写 HTTP/2 规范 的 初稿 时 ， 它 的 作者 利用 了 SPDY 的 先进 性 ， 并 将 其 作为 
起 点 。 现 在 HTTP/2 的 支持 度 已 经 大 幅 增长 ,Google 已 经 从 Chrome 51 和 更 高 版 本 中 删除 了 SPDY 
支持 ， 其 他 浏览 器 也 将 效仿 。 下 面 看 看 HTTP/2 如 何 修复 前 面 提 到 的 HTTP/1 的 问题 。 


1. 不 再 有 队 头 阻塞 

HTTP/1 开始 响应 队列 中 的 其 他 请 求 之 前 , 可 以 满足 的 请 求 数量 是 有 限 的 。HTTP/2 的 不 同 之 
处 在 于 ， 它 可 以 通过 实现 新 的 通信 体系 结构 来 并 行 满足 更 多 请 求 。 与 使 用 多 个 连接 传输 资源 的 
HTTP/1 不 同 , HTTP/2 能 够 使 用 一 个 连接 并 行 处 理 多 个 请 求 。 连接 由 以 下 层次 结构 中 的 组 件 构 成 。 
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口 流 (stream) 是 服务 器 和 浏览 器 之 间 的 双向 通信 通道 。 单 个 流 由 对 服务 器 的 请 求 和 来 自 
服务 需 的 响应 组 成 。 因 为 流 是 由 连接 封装 的 ， 所 以 可 以 通过 使 用 多 个 流 ， 在 同一 连接 中 
并 行 下 载 许多 资源 。 

口 消息 (message) 由 流 封装 。 单 个 消息 大 致 相当 于 对 服务 器 的 一 个 HTTP/1 请 求 或 来 自 服 

务 器 的 一 个 响应 ， 提 供 了 请 求 资 源 和 从 Web 服务 器 接收 资源 内 容 所 需 的 机 制 。 

口 帧 〈frame) 由 消息 封装 。 帧 是 消息 中 的 分 隔 符 ， 表 明 后 面 的 数据 类 型 。 例 如 ， 响 应 消息 
中 的 HEADERS 帧 表明 以 下 数据 表示 响应 的 HITP 头 。 响 应 消息 中 的 DATA 帧 表示 以 下 数 

据 是 所 请 求 资源 的 内 容 。 还 存在 其 他 帧 类 型 , 例如 用 于 服务 器 推送 的 PUSH_PROMISE 帧 ， 
本 章 稍 后 将 介绍 。 

将 这 个 过 程 可 视 化 后 ， 将 如 图 11-4 所 示 。 


于 

流 
i 和 服务 器 
去 二 响应 消息 a 
-= 
ea le, 跨 中 是 阐 

响应 消息 
增加 的 流 


图 11-4 剖析 HTTP/2 请 求 。 一 个 连接 包含 多 个 双向 流 ， 而 双向 流 又 包含 多 个 请 求 和 接收 
资源 的 消息 。 这 些 消息 由 帧 分 隔 ， 帧 描述 了 消息 的 内 容 〈 头 部 、 响 应 体 等 ) 


这 种 设计 降低 了 对 HTTP/2 服务 器 发 起 请 求 的 成 本 。 事 实 上 ， 成 本 已 经 低 到 不 值得 再 拥 绑 资 
源 了 , 在 某 些 情况 下 ， 捆 绑 甚 至 会 导致 加 载 速度 变 慢 。 后 面 将 介绍 细节 ,但 重要 的 是 ， 你 可 能 不 
需要 使 用 雪 怕 图 和 拥 绑 资 源 这 样 的 反 模 式 。( 尽管 这 些 技术 在 HTTP/1 客户 端 和 服务 咒 端 中 很 
有 用 ， 但 很 多 客户 端 和 服务 器 端 并 没有 采用 这 些 技术 。 ) 


2. 头 部 压缩 

如 前 所 述 ， 即 使 开启 了 服务 器 压缩 ，HTTP/1 中 的 头 部 也 是 未 压缩 的 。 服 务 器 压缩 只 转换 资 
源 ， 而 不 转换 头 部 。 虽 然 头 部 占 页 面 总 负载 的 比例 不 大 ， 但 它们 累积 起 来 也 相当 可 观 。 

HTTP/2 引入 了 一 个 名 为 HPACK 的 压缩 算法 来 解决 这 个 问题 。HPACK 不 仅 压 缩 头 部 数据 ， 
还 通过 创建 一 个 表 来 存储 重复 的 头 部 ， 以 删除 多 余 头 部 。 在 HTTP/1 请 求 关 中， 你 会 注意 到 内 容 
较 长 的 头 部 (如 cookie 和 User-Agent ) 被 不 必要 地 附加 到 每 个 请 求 ， 从 而 创建 了 一 个 潜在 的 
有 大 量 宛 余 的 数据 集 ， 这 些 数据 必须 随 请 求 一 起 传输 到 服务 器 ， 如 图 11-3 所 示 。 
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HPACK 通过 利用 索引 来 跟踪 跨 请 求 的 重复 的 头 部 数据 的 表 ， 以 消除 重复 的 头 部 。 它 的 结构 
类 似 于 一 个 带 有 索引 的 典型 数据 库 表 。 发 现 新 的 头 部 值 时 , 会 将 其 压缩 并 存储 在 表 中 ， 并 赋予 一 
个 唯一 的 标识 符 。 如 果 发 现 与 以 前 索引 的 头 部 匹配 的 其 他 头 部 , 则 表 索 引 中 的 相关 标识 符 被 引用 


而 不 是 元 余地 存储 ， 如 图 11-5 所 示 。 


对 /index.html 的 请 求 


GET 


:method 


:host weeklytimber ,Com 


删除 重复 数据 的 索引 表 


:Path /index.html 


cookie sid=23efwdf23... 


klytimber. 
user-agent Monll la A 


/index.html 


对 /css/styles.css 的 请 求 


GET 


sid=23efwdf23... 


:method Moz 5 本 0 且 


:host weeklytimber . com 


/css/styles,.css 


cookie Sid=23efwdf23... 


user-agent Mozilla/5.0... 


/css/styles.css 


图 11-5 HPACK 头 部 压缩 的 过 程 。 头 部 存储 在 索引 表 中 。 在 后 续 对 同一 页 的 请 求 中 发 
现 相同 头 部 时 , 将 关联 到 表 中 的 索引 以 避免 数据 重复 , 而 具有 新 数据 的 头 部 将 
作为 新 条 目 存储 在 表 中 


发 出 请 求 时 ,这 个 过 程 在 客户 端 完 成 ,表格 被 传输 到 服务 器 端 ， 并 由 服务 器 端 解 包 以 生成 响 
应 。 然 后 ,服务 絮 端 对 响应 头 重复 此 过 程 ， 客 户 端 对 服务 避 端 生成 的 响应 表 进行 解 包 ， 并 将 这 些 
头 部 应 用 于 每 个 下 载 资源 的 响应 。 其 结果 是 ， 去 重 的 头 部 和 压缩 数据 以 与 HITP/1 头 部 相同 的 方 
式 泻 染 ， 过 程 是 透明 的 。 网 站 加 载 速 度 也 因此 而 变 快 。 


3. 确保 HTTPS 
虽然 和 性 能 关联 不 大 ， 但 支持 HTTP/2 的 浏览 器 实际 上 要 求 通过 HTTP/2 进行 的 任何 通信 都 
必须 是 安全 的 。 这 个 要 求 存在 争议 ， 但 还 是 有 好 处 的 。 随 着 越 来 越 多 的 服务 器 采用 HITP/2 并 实 
现 SSL， 整 个 互联 网 将 变 得 越 来 越 安 全 。 


SSL 性 能 开销 
SSL 的 一 个 常见 问题 是 ,由 于 在 服务 器 和 客户 端 之 间 建 立 SSL 连接 需要 时 间 , 所 以 它 对 
TTFB 性 能 的 影响 是 可 测量 的 。 因 为 HTTP/2 通过 一 个 (而 不 是 多 个 ) 连接 传递 所 有 数据 ， 
所 以 这 个 过 程 只 需要 发 生 一 次 ， 而 不 是 像 HTTP/1 那样 多 次 发 生 。 如 今 的 硬件 性 能 也 使 得 这 
个 过 程 变 得 轻松 。 结 果 如 何 ? 你 不 必 再 担心 SSL 性 能 ， 只 要 考虑 为 用 户 提供 安全 的 浏览 体验 
即 可 。 
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SSL 证书 的 成 本 再 低 不 过 了 。 证 书 提供 商 提供 可 靠 的 签名 证 书 ， 一 个 域名 一 年 只 要 5 美元 。 
如 果 这 个 价格 对 你 来 说 仍然 太 高 ， 可 以 通过 Lets Encrypt 获得 免费 证 书 。 我 发 现 这 个 获取 证 书 的 
过 程 比 设置 已 购买 的 证 书 还 要 复杂 一 些 (取决 于 主机 环境 )。 

关键 是 ， 你 再 无 借口 拒绝 为 用 户 提供 安全 的 浏览 体验 ， 如 果 你 想 使 用 HITP/2， 也 没有 选择 
的 余地 。 采 用 HTTPS 加 密 吧 ! 

接 下 来 ， 我 们 将 在 Node 中 编写 自己 的 HTTP/2 服务 器 ， 从 而 加 深 对 HTTP/2 的 理解 。 


11.1.3 在 Node 中 编写 一 个 简单 的 HTTP/2 服务 器 


Weekly Timber 的 客户 联系 人 间 你 是 否 可 以 做 些 工作 以 使 网 站 更 快 。 虽然 无 法 保证 ， 但 你 有 
强烈 的 预感 : HTTP/2 可 能 是 一 个 选择 。 

当然 ， 在 本 地 下 载 和 安装 Apache 或 Nginx 这 样 的 HTTP/2 服务 器 有 点 麻烦 ， 而 且 你 当前 的 
主机 提供 商 没 有 提供 该 服务 。 既 然 HTTP/2 服务 器 不 能 快速 获得 ， 又 该 如 何在 这 个 服务 器 上 测试 
Weekly Timber 网 站 呢 ? 答案 很 简单 : 可 以 使 用 npm 中 的 spay 包 ,， 在 Node 中 编写 一 个 简单 的 
HTTP/2 服务 器 ! 

“等 等 ， 为 什么 是 SPDY? ”我 明白 你 的 意思 ， 别 担心 ! 这 个 包 的 名 字 有 点 不 太 恰 当 。 虽 然 
SPDY 是 这 个 包 文 持 的 协议 之 一 ， 0 HTTP/?, 这 才 是 你 需要 的 。 首 先 ， 正如 本 书 中 已 
经 多 次 做 过 的 那样 ， 需 要 使 用 git 下 载 一 些 代 码 ，,: 

git clone https://github.com/webopt/chl1l-http2.git 

coentl=http2 

npm install 

这 将 下 载 所 有 源 代码 ,并 安装 要 编写 的 HTTP/2 服务 器 所 需 的 Node 依赖 包 , 其 中 包括 了 spay 
包 。 一 切 就 绪 后 ， 打 开 文 本 编辑 器 ， 在 网 站 的 根 文件 夹 中 创建 一 个 名 为 http2jjs 的 新 文件 。 在 这 
个 文件 中 输入 代码 清单 11-1。 


代码 清单 11-1 导入 HTTP/2 服务 器 所 需 的 模块 


导入 文件 系统 模块 ， 
用 于 读 文 件 
导入 sPDY 模块 ， var fs = require("fs" 导入 path 模块 ， 用 于 


O 


用 于 HTTP/2 功能 path = requirel(' ee 路 径 的 规范 化 
http2 = require("spdy" ] 


mime = require("mime") 
pubDir = path.join( dirname, "/htdocs"); 
Sj 
机 设置 为 根 目录 ， 
号 八 HEMe 柠 决 : 用 于 从 中 提供 文件 


决定 内 容 类 型 


可 以 在 此 导入 编写 服务 器 行为 所 需 的 Node 模块 。 还 可 以 建立 根 目 录 ， 从 中 提供 文件 。 与 过 加 
去 的 示例 不 同 ,我 们 将 从 一 个 名 为 htdocs 的 单独 髓 套 文件 夹 提供 这 些 文件 ,该 文件 夹 包含 Weekly 
Timber 的 网 站 。 导 和 模块 后 ， 需 要 设置 SSL 证 书 ， 因 为 HTTP/2 需要 SSL。 下 载 的 代码 已 经 包含 
了 crt 文件 夹 所 需 的 证 书 文件 。 代 码 清单 11-2 显示 了 如 何 配置 服务 器 以 指向 这 些 证 书 文 件 。 
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代码 清单 11-2 ”设置 服务 需 的 SSL 证 书 


创建 一 个 HTTP/2 重 的 宏 
[ 人 
Var server = http2.createServer({ 


key: fs.readFileSync(path.join(_ dirname, "/crt/localhost.key")), 
cert: fs.readFileSync (path.join(_ dirname, "/crt/localhost.crt")) 


此 处 编写 的 JavaScript 将 证 书 文件 的 位 置 发送 给 HTTP/2 服务 器 ， 使 其 能 够 与 浏览 器 安全 通 
信 。 代 码 清单 11-3 提供 了 服务 器 将 要 做 的 大 部 分 工作 。 


代码 清单 11-3 ”编写 HTTP/2 服务 器 行为 


请 求 处 理 程序 
}, function(request, response)t 资源 的 文件 


资源 的 内 容 0 
类 型 var filename = path.join(pubDir, request .url), 示 纺 遇 仔 


contentType = mime.lookup (filename); 


if((filename.indexOf (pubDir) === 0) && i 
fs.existsSync (filename) && 判断 资源 
fs.statSync (filename) .isFile())t{ 是 否 存在 

st ol jy | 安 = 训 
response.writeHead(200, { ,| 多 这 200 ee 设置 Content Type 
"content-type": contentType, 响应 头 
"cache-control": "max-age=3600" 
Ea 源 和 
小 时 

Var fileStream = fs.createReadStream(filename) 发 送 资源 

fileStream.pipe (response); 给 用 户 

fileStream.on ("finish", response.end); 

} 

elsel{ 
response.writeHead (404); 如 果 找 不 到 资源 ， 
response.end(); 则 发 送 404 响应 


下 sy 
在 8443 端口 上 


启动 服务 器 


server.listen(8443); 
将 以 上 代码 输入 文本 编辑 器 后 ， 使 用 以 下 命令 在 终端 中 运行 这 个 脚本 : 


node http2.js 


运行 该 脚本 后 ， 可 以 浏览 器 中 转 到 https://localhost:8443/index.html， 并 查看 客户 网 站 是 否 正 
常 加 载 。 


破 例 
从 GitHub 下 载 的 源 代码 中 提供 的 证 书 是 未 签名 的 ， 因 此 ， a 网 站 
时 ,浏览 器 将 发 出 SSL 警告 。 破例 或 忽略 这 个 警告 后 ， 即 可 顺利 进行 。 请 记 住 ， 应 该 始终 
Web 生产 服务 器 0 签名 证 书 。 
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一 切 顺 利 ， 但 是 你 怎么 知道 协议 是 HTTP/2 呢 ? 这 很 容易 ! 在 Chrome 的 开发 者 工具 中 ， 打 
开 Network 选项 卡 ， 右 键 单 击 列 头 ， 选 中 Protocol 列 ， 然 后 可 以 看 到 图 11-6 所 示 的 内 容 。 


Name Method Status Protocol Scheme 
index.html GET 200 h2 https 
_ styles.min.css GET 200 h2 https 


显示 通过 HTTP/2 传 输 的 资源 


图 11-6 Chrome 开发 者 工具 中 的 Network 面板 表明 了 通过 HTTP/2 传输 的 资源 。 
通过 HTTP/1 传输 的 资源 在 这 个 字段 中 对 应 的 值 是 http/1.1 


11.1.4 观察 收益 

在 Weekly Timber 这 样 的 网 站 上 ， 起 初 收益 似乎 不 明显 。 要 识别 收益 很 难 ， 甚 至 在 没有 遇 到 
任何 网 络 瓶颈 的 本 地 机 器 上 也 是 如 此 。 可 以 看 到 ， 现 在 请 求 是 并 行 执行 的 ， 而 不 是 串 行 批 处 理 ， 
如 图 11-7 所 示 。 


HTTP/1 HTTP/2 


Timeline - Start Time 400.00ms Timeline ~ Start Time 400.00 ms 


更 多 串 行 请 求 更 多 并 行 请 求 
图 11-7 HTTP/1 ( 左 ) 与 HITP/2 ( 右 ) 上 对 资源 下 载 的 影响 : HTTP/2 中 的 下 载 
比 HTTP/ 中 的 并 行程 度 高 ， 这 意味 着 它们 能 够 大 致 在 同一 时 间 开 始 


你 可 以 自己 观察 到 这 种 现象 : 运行 网 站 根 文件 夹 中 的 httpljs 脚本 ， 导 航 到 https://localhost: 
8080/index.html， 并 将 其 在 Network 选项 卡 中 的 行为 与 刚刚 编写 的 HTTP/2 服务 器 进行 比较 。 你 
可 能 会 发 现 , 如 果 使 用 节 流 配置 比较 本 地 机 器 上 两 个 协议 的 性 能 , 那么 客户 网 站 的 加 载 时 间 是 一 
样 的 。 这 是 因为 创建 人 工 瓶 颈 对 于 测试 一 些 场 景 来 说 是 好 的 ， 但 它 不 是 比较 协议 性 能 的 好 工具 。 
这 两 个 服务 需 都 在 本 地 机 器 上 运行 ,而 不 是 在 某 个 远程 服务 器 上 ; 除了 你 的 请 求 以 外 , 没有 为 其 
提供 其 他 流量 。 了 解 HTTP/2 与 HTTP/1 性 能 的 最 佳 方法 是 在 某 个 远程 主机 上 运行 两 个 服务 器 : 
一 个 运行 HITP/2， 另 一 个 运行 HTTP/1。 这 样 ， 你 才能 观察 到 差异 。 
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这 个 要 求 不 合理 ， 所 以 我 已 经 为 你 做 了 艰苦 的 工作 。 我 建立 了 两 个 版 本 的 客户 网 站 : 一 个 运 
行 在 HTTP/1 上 ( https://h1l.jeremywagner.me )， 另 一 个 运行 在 HTTP/2 上 (https://h2.jeremywagner. 
me )。 你 可 以 随意 访问 这 些 URL， 并 进行 自己 的 测试 ， 以 查看 它们 在 真实 环境 下 〈 而 不 是 在 本 地 
机 器 相对 简陋 的 环境 中 ) 的 表现 。 图 11-8 显示 了 我 在 每 个 协议 上 对 客户 网 站 全 部 5 个 页 面 的 测试 。 


Weekly Timber 的 页 面 加 载 时 间 : HTTP/1 与 HTTP/2 (数值 越 低 越 好 ) 
1500 ms 王 


团 HTTP/! 
加 HTTP/2 


1200 ms 


900 ms 


600 ms 


300 ms 


0ms 


索引 我 们 的 工作 ”我 们 的 进程 ” 联系 我 们 地理 位 置 
图 11-8 ”比较 Weekly Timber 网 站 在 HTTP/1 和 HTTP/2 上 的 加 载 时 间 


在 页 面具 有 很 多 资源 的 情况 下 ， 总 加 载 时 间 缩 短 了 24%， 比 如 在 our-work.html 和 
our-process.html 页 面 中 。 在 index.html 和 contact-us.html 等 典型 页 面 上 , 我 分 别 看 到 了 15% 和 7% 
的 改进 。locations.html 的 页 面 性 能 没有 提高 ， 因 为 它 与 其 他 页 面相 比 几 乎 没有 资源 。 

头 部 压缩 带 来 的 收益 更 难 量化 。 但 是 如 果 你 在 Chrome 中 打开 chrome://net-internals#timeline， 
可 以 看 到 头 部 压缩 对 请 求 大 小 的 影响 。 取 消 选 中 左边 的 每 个 选项 (除了 Bytes Sent )， 然 后 加 载 每 
个 协议 的 页 面 ， 你 将 看 到 请 求 大 小 的 比较 。 图 11-9 显示 了 这 个 工具 的 实际 效果 。 


HTTP/2 字 节 导 出 HTTP/1 字 节 导 出 


Open sockets 10 kB/s 
| Inuse sockets 


URL requests 
DNS jobs ee 
Bytes received 

图 Bytes sent 

| Disk cache bytes read 6 kB/s 
Disk cache bytes written 


4KkB/s 


2 kB/s 


0 kB/s 


2:55:00 PM 1:00:00 PM 1:05:00 PM 


图 11-9 HTTP/2 会 话 与 HTTP/1 会 话 期 间 发 送 的 字 节 
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如 图 11-9 所 示 , 经 过 头 部 压缩 后 , 使 用 HTTP/2 发 送 到 服务 器 的 字 节 更 少 。 尽 管 net internals 
面板 中 的 工具 没有 显示 确切 的 大 小 , 但 可 以 看 到 改进 大 约 是 50%。 这 个 较 小 的 请 求 负载 意味 着 用 
户 将 花费 较 少 的 时 间 等 待 内 容 的 第 一 字 节 到 达 。 

所 有 这 些 好 处 都 是 通过 切换 到 HITTP/ 实现 的 。 它 们 不 需要 任何 特殊 的 优化 技术 或 代码 修改 ， 
仅仅 实现 协议 本 身 就 可 以 。 

接 下 来 ， 我们 将 了 解 在 HTTP/2 上 运行 站 点 时 ， 之 前 所 学 的 优化 技术 是 如 何 变 化 的 ， 以 及 为 
什么 你 的 方法 需要 有 所 变化 。 
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你 可 能 会 想 :“ 这 可 好 ,我 得 到 了 这 本 关于 Web 性 能 的 书 , 但 从 中 学 到 的 一 切 都 是 错误 的 。” 

不 一 定 。 尽管 本 书 中 介绍 的 一 些 技 术 在 应 用 于 HTTP/2 客户 端 /服务 器 端 交互 时 是 反 模 式 ， 但 它 

们 不 一 定 会 妨碍 协议 的 性 能 一 一 它们 只 会 影响 缓存 策略 的 有 效 性 。HTTP/2 的 优化 技术 规则 如 

下 所 示 。 

口 在 HITP/2 上 仍然 要 使 用 减 小 资源 大 小 的 技术 。 这 些 技术 包括 缩小 、 服 务 器 压缩 和 图 像 优 

化 。 无 论 何 时 ， 减 小 资源 的 大 小 总 有 助 于 缩短 加 载 时 间 。 

口 在 HTTP/2 上, 应 该 停止 使 用 组 合 文件 的 技术 。 虽 然 在 减少 HITP/1 客户 端 /服务 器 端 交互 
的 延迟 方面 很 有 用 , 但 是 在 HTTP/2 中 请 求 成 本 要 低 得 多 , 并 且 合 并 文件 可 能 会 对 缓存 效 
率 产 生 不 利 影响 。 

第 一 条 规则 本 身 就 说 明了 问题 ， 但 是 我 们 需要 多 谈 谈 第 二 条 规则 : 合并 资源 对 缓存 的 影响 ， 

以 及 适合 合并 的 反 模 式 。 


11.2.1 资源 粒度 与 缓存 效率 


当 你 尽量 提升 HTTP/1 中 的 性 能 时 ， 采 用 过 许多 技术 ， 尽 管 这 些 技术 很 有 效 ， 但 在 HTTP/2 
环境 中 很 难 实现 。 影 响 HTTP/2 性 能 的 主要 技术 是 那些 依赖 于 连接 的 技术 。 连 接 (concatenation ) 
是 为 了 减少 发 送 的 HTTP 请 求 的 数量 而 组 合 文件 的 过 程 。 如 前 所 述 ， 这 对 HTTP/1 很 好 ,但 可 能 
会 损害 HTTP/2 上 的 性 能 。 

实际 原因 是 什么 呢 ? 答案 是 缓存 。 正 如 第 10 章 中 所 说 ,缓存 有 助 于 减少 页 面 在 第 一 次 访问 
之 后 的 有 效 负 和 载 。 但 是 , 问题 不 在 于 缓存 本 身 ， 因 为 无 论 我 们 是 否 连 接 文 件 ,正确 配置 的 缓存 策 
略 都 将 起 作用 。 问 题 是 ,连接 文件 会 降低 资源 更 改 时 缓存 的 效率 。 对 两 种 协议 来 说 都 是 如 此 ,但 
是 使 用 HTTP/1 时 ， 你 愿意 放弃 一 定 的 效率 ， 以 尽量 减少 用 户 首 次 访问 站 点 的 加 载 时 间 。 

我 们 用 一 个 很 好 的 例子 来 说 明 连 接 如 何 影响 缓存 : 假设 你 有 一 个 图 标 雪 瑰 图 , 并 且 只 需要 更 
新 集合 中 的 一 个 图 标 。 即 使 你 只 更 改 了 其 中 一 个 图 标 , 但 由 于 资源 是 整体 的 , 所 以 必须 将 其 从 浏 
览 需 缓 存 中 清除 。 这 会 产生 一 个 问题 : 即使 只 有 一 部 分 被 更 改 了 ， 整 个 文件 依然 必须 失效 和 重新 
今 索 ， 如 图 11-10 所 示 。 
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用 户 icons.svg 


J yy 2. 只 修改 一 个 图 标 
a 3. 用 户 接受 全 部 雪 负 图 


图 11-10 连接 会 降低 缓存 效率 。 雪 插图 中 的 4 个 图 标 之 一 被 修改 时 ， 即 使 75% 的 文件 
内 容 未 被 修改 ， 用 户 也 将 被 迫 下 载 整个 资源 ( 而 不 仅仅 是 被 修改 的 部 分 ) 


在 HTTP/1 优化 工作 流 中 ， 为 了 构建 快速 网 站 ， 我 们 接受 了 这 种 局 部 优化 。 现 在 HTTP/2 为 
我 们 提供 了 更 低 成 本 的 连接 , 你 不 必 在 首次 访问 的 短 页 面 加 载 时 间 和 高 效 缓存 之 间 做 出 选择 。 鱼 
与 熊 掌 可 以 兼 得 ! 接 下 来 ， 看 看 站 点 在 HITP/2 上 时 应 该 避免 采用 的 技术 。 


11.2.2 ”识别 HTTP/2 的 性 能 反 模 式 


如 前 所 述 ， 以 某 种 方式 连接 资源 时 会 损害 HITP/2 服务 器 性 能 ， 这 将 降低 缓存 策略 的 效率 。 
但 是 这 类 技术 并 不 只 有 连接 。 本 节 列 举 了 此 类 技术 ， 以 及 你 应 该 避免 使 用 它们 的 原因 。 


1. 构建 CSS 和 JavaScript 

连接 的 一 个 常见 用 法 是 捆绑 CSS 和 JavaScript 文件。 在 HTTP/1 上 连接 ， 这 有 两 个 作用 。 第 
一 个 作用 显然 已 经 概述 过 了 : 更 少 的 请 求 有 利于 HTTP/1 客户 端 /服务 器 端 交 互 。 第 二 , 它 可 以 通 
过 提前 加 载 所 有 资源 加 快 后 续 页 面 的 加 载 速度 。 

第 二 个 原因 同样 适用 于 HTTP/2 驱动 的 网 站 ,但 是 因为 请 求 成 本 更 低 ， 所 以 让 CSS 和 
JavaScript 的 粒度 更 细 会 更 有 意义 。 对 于 CSS, 这 很 简单 : 为 每 个 唯一 的 页 面 模板 创建 不 同 的 CSS 
文件 。 这 样 可 以 切割 CSS， 在 需要 的 页 面 上 加 载 它 ， 并 且 可 以 限制 所 有 CSS 更 新 对 特定 模板 的 
影响 ， 这 将 最 大 程度 提高 缓存 策略 的 有 效 性 。 

至 于 JavaScript 文件 的 拆 分 方式 ， 则 取决 于 网 站 及 其 所 需 的 功能 。 你 可 以 根据 应 用 它们 的 页 
面 模板 拆 分 这 些 脚 本 , 但 这 可 能 并 非 适 用 于 所 有 网 站 ， 因 为 页 面 可 能 共享 公共 的 功能 。 怎 样 合理 
就 怎样 做 。 并 不 存在 对 所 有 网 站 而 言 都 正确 的 答案 。 


2. 图 像 雪 磊 图 

我 确实 在 第 6 章 介绍 并 推荐 了 这 项 技术 , 但 前 提 是 你 要 在 HTTP/1 服务 器 上 托管 网 站 , 否则 ， 
图 像 雪 兰 图 会 产生 与 任何 其 他 形式 的 连接 相同 的 后 果 。 

你 可 能 会 遇 到 一 种 奇怪 的 情况 ， 即 图 像 雪 眉 图 可 能 比 其 单个 图 像 文件 的 总 和 稍 小 。 在 这 种 
情况 下 , 在 HTTP/1 中 ， 请 保持 图 像 分 离 ， 而 不 是 合并 它们 。 以 后 需要 更 新 一 个 图 像 时 ， 你 会 意 
识 到 从 缓存 策略 中 获得 的 好 处 ， 因 为 你 的 访问 者 不 会 被 迫 下 载 整个 雪 尊 图 来 获得 某 个 被 更 改 的 
图 像 。 
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3. 资源 内 联 

这 一 点 解释 起 来 略微 困难 一 些 ， 但 它 仍然 属于 连接 的 讨论 范畴 : 资源 内 联 发 生 在 获取 CSS、 
JavaScript 或 二 进 制 资源 , 并 将 其 对 入 HTML 或 CSS 时 。 对 于 文本 资源 , 这 意味 着 你 要 在 <style> 
标签 中 复制 粘贴 一 些 CSS， 或 者 在 <script> 标 签 中 使 用 JavaScript 执行 相同 的 操作 。 你 还 可 以 
将 SVG 图 像 直 接 内 联 到 HIML。 

内 联 二 进 制 资源 可 以 使 用 数据 URI 方案 来 实现 。 此 方法 将 数据 编码 为 base64 字符 串 ， 并 将 
其 与 内 容 类 型 组 合 。 如 图 11-11 所 示 ， 该 字符 串 可 用 于 类 似 <img> 标 签 的 内 容 中 。 


数据 URI 内 容 编码 
<img src="data:image/png;base64,iVBORWOKGgOAAAANS..."> 
内 容 类 型 编码 数据 


图 11-11 数据 URI 示例 。 该 方案 以 数据 URI 开头， 后 跟 编 码 数 据 的 内 容 类 型 、 
编码 方案 的 名 称 和 编码 数据 ( 在 本 例 中 被 截断 了 ) 


上 例 中 ， 编 码 的 字符 串 被 截断 了 ， 但 已 体现 出 大 意 。 数 据 URI 方 案 应 用 广泛 ， 比 如 <1ink> 
标签 、<img> 标 签 、CSS 的 url 引用 , 以 及 几乎 任何 允许 你 引用 外 部 资源 的 地 方 。 如 果 你 想 自己 
编码 文件 ， 那 么 Web 上 的 许多 网 站 都 允许 你 这 样 做 ， 比 如 Base64 Decode and Encode 网 站 。 
虽然 使 用 数据 URI 方 案 似 乎 是 一 个 好 主意 ， 在 一 些 场景 中 可 能 有 些 用 处 ， 但 它们 效率 低下 。 
编码 的 字符 串通 常 比 它 的 源 字符 串 大 ， 有 时 超过 33% 其 至 更 多 。 

更 糟糕 的 是 , 所 有 的 资源 内 联 方法 都 无 法 有 效 缓存 。 跨 多 个 文档 使 用 的 内 联 数据 是 元 余下 载 

的 ， 并 且 只 能 在 包含 它 的 文档 的 上 下 文中 缓存 。 
第 4 章 讨论 关键 CSS 技术 时 ， 我 们 曾 建 议 在 <style> 标 签 中 为 首 屏 内 容 内 联 CSS。 这 仍 是 
一 项 能 够 缩短 HTTP/1 客户 端 /服务 器 端 交 互 中 绘制 时 间 的 有 效 技术 , 并 且 在 这 些 情况 下 应 该 考虑 
采用 。 但 使 用 HITP/2 时 ， 你 可 能 不 需要 它 。 实 际 上 ， 下 一 节 要 介绍 的 “服务 器 推送 ”HTTP/2 
特性 就 允许 在 你 获得 内 联 好 处 的 同时 ， 保 持 浏览 器 缓存 的 有 效 性 。 

我 知道 我 有 些 嗓 嗪 ， 但 不 得 不 再 次 强调 ， 你 不 能 在 HTTP/2 中 内 联 资源 ， 原 因 和 不 应 使 用 图 
像 雪 医 图 或 打包 CSS/JavaScript 的 原因 一 样 。 解 决 这 个 问题 的 简单 方法 是 : 如 果 你 的 目标 是 减少 
请 求 ， 那 么 只 对 在 HTTP/1 上 运行 的 网 站 这 样 做 。 对 于 HTTP/2， 则 保持 资源 的 粒度 与 工作 流 相 
匹配 。 
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过 去 ,如 果 你 想 加 快 页 面 演 染 速度 ,可 以 将 资源 内 联 到 HTML。 它 不 会 显著 减 小 页 面 大 小 或 
减少 总 加 载 时 间 , 但 有 可 能 减少 网 页 的 演 染 时 间 。 

如 前 所 述 ， 资源 内 联 当 然 是 一 种 反 模 式 , 虽然 对 运行 在 HTTP/1 上 的 网 站 有 效 , 但 会 破坏 内 联 
内 容 的 良好 缓存 策略 的 有 效 性 。 在 HTTP/1 上 ， 我 们 愿意 接受 这 个 缺点 ， 以 换取 较 短 的 加 载 时 间 。 
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所 以 ， 如 果 你 不 应 该 在 HTTP/2 上 内 联 资源 ， 那 么 该 如 何 实现 内 联 的 好 处 呢 ? 使 用 一 个 叫 作 
“服务 器 推送 ”的 新 功能 ! 本 节 将 介绍 此 功能 及 其 工作 原理 , 还 将 说 明 如 何在 Node 驱动 的 HTTP/2 
服务 器 中 使 用 它 ， 以 及 使 用 它 的 好 处 。 


11.3.1 理解 服务 器 推送 及 其 工作 原理 


服务 器 推送 是 HTTP/2 中 的 一 个 功能 ， 它 使 你 能 够 实现 资源 内 联 的 好 处 ， 同 时 仍然 保持 页 面 
资源 的 粒度 。 这 种 机 制 允许 服务 器 “推送 ”用 户 没 有 明确 请 求 但 泻 染 页 面 需要 的 资源 。 

使 用 服务 器 推送 时 ， 用 户 会 请 求 页 面 。 然 后 根据 其 配置 ， 服 务 器 可 以 回复 请 求 文档 的 内 容 ， 
以 及 服务 器 应 “推送 ”到 客户 端的 资源 。 

假设 一 个 用 户 访问 Weekly Timber 网 站 〈 在 本 例 中 运行 在 HTTP/2 服务 器 上 ) 并 请 求 index.html。 
可 以 预见 ， 服 务 器 接收 index.html 的 请 求 并 为 其 构造 响应 。 但 是 , 我 们 也 可 以 想象 Web 服务 器 的 
所 有 者 已 经 将 服务 器 配置 为 还 使 用 styles.min.css 的 副本 进行 响应 ,styles.min.css 是 站 点 的 样式 表 。 
这 可 以 减少 用 户 等 待 样式 下 载 的 时 间 ， 因 为 服务 器 不 必 等 待 客户 端 请 求 styles.min.css ， 就 以 并 行 
方式 发 送 它 以 及 index.html 的 响应 。 这 个 过 程 如 图 11-12 所 示 。 


服务 器 
| 
[Eee 
| 
数据 | 一 | 头 间 
响应 
[pust FroMsE 上 = 


包含 了 styles.min.css 


的 推送 啊 应 


图 11-12 一 个 服务 器 推送 事件 的 剖析 用 户 请 求 index.html， 服 务 器 根据 其 配置 ， 
使 用 包含 styles.min.css 的 副本 的 PUSH_PROMISE 帧 进行 响应 


可 以 看 到 这 个 特性 像 资 源 内 联 一 样 ， 因 为 当 服 务 器 用 HTML 的 内 容 响 应 时 ， 这 两 个 资源 会 
被 同时 推送 到 客户 端 。 当 然 ， 这 不 限于 一 次 推送 一 项 资源 。 你 想 推送 多 少 资源 就 推送 多 少 。 

对 服务 器 推送 的 工作 方式 有 了 初步 了 解 后 , 下面 继续 学 习 各 种 服务 器 如 何 实现 它 , 包括 如 何 
在 Node HTTP/2 服务 器 中 编写 自己 的 服务 器 推送 行为 ! 


11.3.2 ”使 用 服务 器 推送 


如 果 不 确定 Web 服务 器 是 如 何 实现 服务 器 推送 的 ， 那 么 使 用 服务 器 推送 可 能 是 一 个 挑战 。 
下 面 简单 解释 了 如 何在 一 些 常 用 的 Web 服务 器 上 使 用 服务 器 推送 、 如 何在 Node Web 服务 器 上 使 
用 服务 需 推 送 ， 以 及 如 何 判 断 它 是 否 正常 工作 。 
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1. 服务 器 推送 的 常用 调用 方式 
对 于 运行 HTTP/2 的 Web 服务 器 ( 如 Apache ), 请 求 特定 资源 时 ,可 以 通过 设置 Link HTTP 
响应 头 来 调用 服务 器 推送 : 


Link: </css/styles.min.css>; rel=preload; as=style 


如 果 你 觉得 这 看 起 来 很 熟悉 , 那 是 因为 第 10 章 中 介绍 的 preload 资源 提示 HTTP 头 采 用 了 
相同 的 格式 。 也 就 是 说 ， 不 要 将 此 与 用 于 资源 提示 的 <Iink> 标 签 混淆 ! 你 不 需要 修改 网 站 的 
HTML 来 使 用 服务 器 推送 ， 因 为 这 是 服务 器 驱动 的 行为 。 如 果 通 过 <1ink> 标 签 修改 HTML 以 添 
加 preload 资源 提示 ， 并 期 望 服务 器 推送 能 够 工作 ， 那 你 就 错 了 。 它 只 会 为 用 户 预 加 载 资源 ， 
而 不 会 调用 服务 器 推 送 事件 。 

对 于 以 前 面 所 示 的 方式 实现 服务 器 推送 的 Web 服务 器 ， 它 将 接受 尖 括 号 内 指定 的 资源 ， 并 
与 设置 头 部 的 资源 (通常 是 HTML 文件 ) 同时 提供 。as 属性 通知 浏览 器 所 推送 内 容 的 性 质 。 这 
个 例子 中 ,使 用 style 值 指示 推送 的 资源 是 CSS 文件 。 

这 个 实现 非常 方便 并 且 效 果 良 好 。 代 码 清 单 11-4 显示 了 如 何在 服务 器 上 将 CSS 文件 推送 到 
请 求 index.html 的 客户 端 。 


代码 清单 11-4 ”用户 请 求 HTML 文件 时 ，Apache 中 的 推送 内 容 
<Location /index.html> 
Header add Link "</chll-http2/htdocs/css/styles.min.css>; rel=preload; 
as=style" 
</Location> 


这 个 配置 指令 非常 简单 : 当 用 户 导航 到 服务 器 上 的 index.html 时 ， 将 设置 Link 头 部 ， 并 推 
送 styles.min.css。 在 Web 服务 器 实现 服务 器 推送 时 , 设置 此 头 部 的 具体 方式 取决 于 你 使 用 的 服务 
器 软件 。 例 如 ， 我 们 的 Node 示例 做 法 就 非常 不 同 ， 你 必须 自己 实现 服务 器 推送 行为 。 


2. 在 Node 中 编写 服务 器 推送 行为 

为 你 要 负责 为 你 的 Node HTTP/2 服务 器 实现 自己 的 所 有 行为 , 所 以 不 能 设置 Link 头 部 并 
期 望 服 务 器 推送 正常 工作 。 你 需要 手动 编写 将 内 容 推送 到 客户 端的 逻辑 。 

幸运 的 是 ,这 种 逻辑 与 你 向 用 户 提供 资源 的 典型 方式 并 没有 太 大 区 别 。 唯 一 的 区 别 是 ,要 对 
特定 资源 的 请 求 创建 单独 的 推送 响应 。 例 如 ，Weekly Timber 网 站 有 一 个 名 为 styles.min.css 的 样 
式 表 ， 在 客户 端 请 求 HTML 文件 时 ,将 该 CSS 推送 到 客户 端 可 能 是 有 意义 的 ， 尤 其 是 当 Weekly 
Timber 网 站 上 的 每 个 HTML 文件 都 引用 这 个 CSS 的 时 候 。 

所 以 我 们 这 么 做 吧 ! 打开 本 章 前 面 编 写 的 http2.js Web 服务 器 ， 跳 到 为 客户 端 提供 资源 的 请 
求 处 理 程序 函数 ， 并 在 response .writeHead 调用 将 200 响应 发 送 到 客户 端 之 前 ,输入 代码 清 
单 11-5。 
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代码 清单 11-5 


if((filename.indqexof (pubDir) 


0) 


fs.existsSync (filename) && 


判断 是 否 请 求 
HTML 文件 


发 起 指定 
CSS 文件 辐 
的 推送 


推送 响应 的 


回调 函数 ) 


如 果 在 推送 过 程 中 
遇 到 错误 则 终止 


关闭 流 , 并 表 
明 推 送 响 应 
的 结束 


使 用 以 上 代码 ， 可 以 在 用 户 请 求 HTML 文件 时 将 styles.min.css 推送 给 用 户 。 


if(filename.indexOf (".html") 
var pushAsset = 


fs.statSync (filename) .isFile())t 


pushAssetFSPath = 
pushAssetContentType = 


response.push(pushAsset, { 


资源 的 Link 
响应 头 


response:{ 
"content-type": 
"cache-control": 
Ti 


"< 


} 


function(error, stream){ 


if (error)t{ 
return; 


} 


pushStream = 
pushStream.pipe (stream); 


&& 


在 Node HTTP/2 服务 需 中 编写 服务 需 推 送 啊 应 


判断 资源 
是 否 存在 


-1 && response.push)t{ 


"T/COSS/StY les. mL 
path.join (pubDir, 
mime.lookup (pushAssetFSPath); 


pushAssetContentType, 
"max-age=3600", 
+ pushAsset + ">; 


fs.createReadStream(pushAssetrFSPath); - 


pushStream.on ("finish", stream.end); 


pushAsset), 


定义 Link 汰 前 
所 需 的 变量 


rel=preload; as=style" 


CSS 文件 的 响应 头 
内 容 类 型 缓存 策略 


创建 CSS 的 可 读 
流 并 推送 它 


判断 资源 是 否 


被 推送 可 能 有 点 难 办 。Chrome 自 版 本 53 以 来 ， 在 Network 面板 的 mitiator 列 中 指明 被 推送 的 资 
源 。 重 启 服务 器 并 转 到 https://localhost:8443/index.html， 将 看 到 图 11-13 所 示 的 内 容 。 


Name Status Protocol Type Initiator Size 
index.html 200 h2 document Other 4.7 KB 
_ | css?family=Lato:400,700,300,900 200 h2 stylesheet index.html:9 933B 
_ styles.min.css 200 h2 stylesheet Push / index.html:10 18.5 KB 
_ icon-facebook.svg 200 h2 svg+xml index.html:22 301B 
被 推送 的 资源 
图 11-13 Chrome 中 的 Network 选项 卡 ， 通 过 资源 Initiator 列 中 的 Push 关键 字 指 示 被 


推送 的 资源 

其 他 浏览 器 对 推送 的 指示 则 不 太 明 显 。Firefox 将 资源 显示 为 从 浏览 器 缓存 中 读 取 ， 而 Edge 
显示 资源 时 省 略 了 TTFB 度量 。 这 些 表 示 在 技术 上 是 正确 的 ,但 并 不 明显 。 这 些 浏览 器 可 能 会 在 
将 来 进行 更 新 ， 以 明确 指示 是 否 已 推送 资源 。 
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通过 命令 行 分 析 HTTP/2 服务 器 推送 
可 以 使 用 nghttp 命令 行 客户 端 准确 判断 正在 推送 的 资源 , 这 个 客户 端 能 够 显示 HITP/2 会 
话 中 的 所 有 帧 。 如 果 看 到 PUSH_PROMISE 帧 和 推送 资源 的 内 容 ,， 即 可 确定 服务 器 推送 是 有 效 的 。 


服务 器 推送 成 功 地 在 客户 网 站 的 CSS 上 运行 之 后 ， 下 面 来 测量 性 能 。 
11.3.3 ”测量 服务 器 推送 性 能 

测量 服务 器 推送 性 能 比较 麻烦 。 在 本 地 环境 ,这 可 能 很 困难 。 测 量 性 能 的 可 行 方法 包括 : 禁 
用 节 流 或 在 远程 HTTP/2 服务 器 上 托管 网 站 ,以 及 在 实际 网 络 条 件 下 进行 测量 。 在 没有 节 流 的 情 
况 下 进行 本 地 测试 的 问题 是 ， 这 个 场景 是 不 现实 的 。 

在 我 的 例子 中 ， 我 将 远程 HTTP/2 服务 器 上 的 网 站 设置 为 测试 服务 器 推送 。 为 了 测试 ， 我 在 
https://serverpush.jeremywagner.me 上 设置 了 一 个 启用 服务 器 推送 的 客户 网 站 版 本 ,该 版 本 将 网 站 
的 CSS 推送 到 所 有 HTML 页 面 上 的 用 户 。 我 在 https://h2.jeremy-wagner.me 上 设置 了 同一 网 站 没 
有 服务 器 推送 的 版 本 ， 以 便 对 二 者 进行 比较 。 测 试 结果 如 图 11-14 所 示 。 

TTFP 上 的 服务 器 推送 效果 (数值 越 低 越 好 ) 


500 ms 
多 


400 ms | | 服务 器 推送 
300 ms 


200 ms 


100 ms 


0ms 
图 11-14 启用 与 不 启用 服务 器 推送 的 客户 网 站 CSS 的 首次 绘制 时 间 


当 CSS 被 推送 给 用 户 时 ， 页 面 绘制 的 速度 比 没有 推送 时 要 快 19%。 在 我 的 宽带 连接 上 ， 这 
意味 着 演 染 时 间 缩 短 了 大 约 80 毫秒 。 这 不 可 小 舰 ， 特 别 是 当 你 考虑 到 在 网 络 较 慢 的 移动 设备 上 
泻 染 速度 将 成 比例 地 增长 时 。 鉴 于 在 大 多 数 服务 器 上 使 用 它 不 需要 太 多 改造 ， 对 于 注重 性 能 的 
Web 开发 人 员 来 说 ， 这 其 实 很 容易 实现 。 

尽管 服务 器 推送 很 难 “ 用 错 ?， 但 使 用 它 时 ， 仍 需要 记 住 一 些 基本 准则 。 

口 不 局 限于 推送 一 种 资源 。 修 改 Node HTTP/2 服务 器 代码 ， 即 可 推送 多 个 资源 ; 为 其 他 

HTTP/2 服务 器 添加 多 个 Link 头 部 ， 即 可 实现 一 次 推送 多 个 资源 。 
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口 不 要 推送 不 需要 的 东西 。 有 道理 ， 对 吧 ? 你 可 能 会 想 把 所 有 东西 都 推送 给 客户 ， 但 应 该 
只 推送 有 意义 的 内 容 。 一 个 经 验 法 则 是 : 推送 网 站 所 有 页 面 上 都 使 用 的 资源 。 

口 可 以 推送 不 在 当前 页 面 上 的 资源 。 是 的 , 你 甚至 可 以 推送 当前 HTML 文档 不 需要 的 资源 。 
你 可 以 这 样 做 ,以便 在 预计 用 户 可 能 会 导航 到 的 页 面 上 预 加 载 一 个 资源 。 当 然 这 可 能 
些 冒险 ， 你 可 能 会 浪 寓 用 户 的 人 带宽。 如果 没有 理由 ， 那 就 不 要 这 么 做 。 


关于 服务 器 推送 和 浏览 器 缓存 的 说 明 
有 时 , 服务 器 推送 可 能 会 推送 已 由 客户 端 缓存 的 内 容 。 一 种 服务 器 端 机 制 或 许可 以 帮助 你 
解决 这 个 潜在 的 问题 ， 请 参阅 我 在 CSS-Tricks 上 写 的 文章 :“Creating a Cache-aware HTTP/2 


Server Push Mechanism”。 


我 们 已 经 使 用 服务 器 推送 并 看 到 了 它 的 好 处 ， 下 面 学 习 在 同一 服务 器 上 同时 优化 HITP/2 和 
HTTP/1! 


11.4 同时 优化 HTTP/1 和 HTTP/2 


你 已 经 听 过 “ 鱼 与 能 掌 可 以 兼 得 ”这 句 话 。 本 节 将 说 明 如 何 让 网 站 访问 者 从 优化 技术 中 充分 
获 益 ， 无 论 他 们 的 浏览 器 是 否 支持 HTTP/2。 

本 节 介 绍 当 访问 者 使 用 不 支持 HTTP/2 的 浏览 器 访问 你 的 HTTP/2 站 点 时 会 发 生 什么 。 我 们 
将 学 习 如 何 使 用 Google Analytics 确定 无 法 使 用 HTTP/2 的 用 户 ,以 及 如 何 转 换 Node 服务 器 以 适 
应 两 种 协议 的 优化 技术 。 

开始 之 前 我 要 声明 ， 本 节 红 在 演示 概念 证 明 。 其 中 的 方法 不 一 定 是 解决 此 问题 的 可 靠 方法 ， 
但 此 问题 存在 解决 方案 。 如 果 除 了 这 里 使 用 的 工具 之 外 ,你 还 发 现 了 更 有 效 的 方法 ,可 以 试 试 看 
它 是 如 何 工作 的 。 我 们 开始 吧 ! 


11.4.1 HTTP/2 服务 器 如 何 处 理 不 支持 HTTP/2 的 浏览 器 


目前 ， 你 可 能 对 不 支持 HTTP/2 的 浏览 器 如 何 与 HITP/2 服务 器 通信 感到 好 奇 。 事 实 上 ， 每 
个 HTTP/2 服务 器 的 底层 都 有 一 个 HTTP/1 服务 器 在 等 待 一 个 不 支持 HTTP/2 的 客户 端 出 现 。 

就 像 你 在 高 楼 大 厦 里 看 到 的 警示 标语 “紧急 情况 下 , 敲 雄 玻璃 ”一 样 , 这 里 更 准确 的 说 法 是 : 
“如 果 是 不 支持 HTTP/2 的 浏览 器 ， 可 以 降级 到 HTTP/1。” 

使 用 较 旧 浏 览 器 的 用 户 访问 支持 HTTP/2 的 站 点 时 ， 连 接 最 初 以 HTTP/2 对 话 开 始 。 但 是 ， 
如 果 客 户 机 提示 服务 器 将 连接 降级 到 HITP/1 ， 服 务 需 将 遵守 并 使 用 旧版 本 的 协议 。 这 个 过 程 如 
图 11-15 所 示 。 
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index.html 


浏览 器 
是 否 支持 
HTTP/2? 


连接 降级 到 HTTP/1 连接 维持 HITP/2 


图 11-15 HTTP/2 协商 的 剖析 。 客 户 端 请 求 一 个 资源 ， 然 后 服务 器 检查 浏览 器 是 否 
能 够 使 用 HTTP/2， 如 果 能 ， 将 继续 执行 ， 否 则 连接 降级 为 HTTP/1 
你 可 以 使 用 双重 性 质 的 这 种 设计 ,为 两 类 用 户 ( 可 以 /不 能 使 用 HTTP/2 的 用 户 ) 提供 优化 的 
Web 体验 。 可 以 认为 这 样 做 法 是 可 靠 的 ， 因 为 这 是 HTTP/2 规范 的 一 部 分 。 服 务 需 要 想 被 视 为 完 
全 符合 规范 ， 它 需要 能 够 为 旧 浏 览 絮 降级 协议 。 
当然 , 你 需要 知道 双管齐下 的 努力 是 否 值得 。 毕 竞 为 这 两 个 协议 版 本 进行 优化 并 不 是 一 件 小 
事 。 要 做 到 这 一 点 ， 需 要 依靠 Google Analytics 的 数据 来 帮助 你 做 决定 。 


11.4.2 ”划分 用 户 

统计 数据 是 我 们 的 好 帮手 , 特别 是 当 你 想 知道 是 否 值得 采用 两 组 优化 实践 时 。 我 们 可 以 合并 
两 个 来 源 : Can I Use 和 Google Analytics。 

Can I Use 资源 详尽 ， 可 用 来 确定 浏览 絮 对 某 些 功 能 的 支持 情况 ， 而 HTTP/2 就 是 其 中 之 一 。 
导航 到 该 网 站 ， 并 在 顶部 搜索 框 中 输入 HITP/2 ， 然 后 单 击 Usage Relative Toggle 按钮 , 将 看 到 类 
似 于 图 11-16 所 示 的 内 容 。 


HTTP/2 protoco| -oer Global 63.07% + 6.8% = 69.87% 
Networking protocol for low-latency transport of content over the 

web. Originally started out from the SPDY protocol, now 

standardized as HTTP version 2. 


人 


Current aligned 
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IE Firefox 网 
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图 11-16 CanIUse 网 站 显示 了 浏览 器 对 HTTP/2 的 支持 程度 
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使 用 此 工具 ， 可 以 查看 浏览 器 对 某 个 功能 的 支持 程度 。 支 持 HTTP/2 的 浏览 器 显示 为 绿色 ， 
不 支持 的 浏览 器 显示 为 红色 ， 部 分 支持 的 浏览 器 显示 为 淡 绿 色 。 例如 ，IE11 部 分 支持 。 将 鼠标 肪 
停 在 IE11 条 目 上 时 , 将 看 到 HTTP/2 支持 仅 限于 Windows 10 上 的 IE11。 

利用 这 个 工具 能 做 的 还 有 很 多 。 可 以 从 Google Analytics 账户 导入 访问 者 数据 ， 看 看 有 哪些 
访问 者 支持 或 者 不 支持 某 个 功能 ( 比如 HTTP/21 )。 若 要 导入 数据 ， 请 单 击 页 面 顶 部 的 Settings 
按钮 ， 打 开 页 面 左 侧 的 菜单 。 下 面 有 一 个 部 分 ， 可 以 从 Google Analytics 导入 数据 ， 如 图 11-17 
所 示 。 


From Google Analytics: 


图 11-17 从 Google Analytics 导入 数据 的 部 分 


点 击 Import 按钮 后 ， 必 须 授 权 Can I Use 访问 你 的 分 析 数 据 。 授 权 后 ， 选 择 要 从 中 导入 数据 
的 网 站 。 执 行 此 操作 时 ,表示 功能 支持 程度 的 视觉 效果 将 发 生变 化 ， 以 反映 网 站 访问 者 情况 。 本 
例 中 ， 可 以 看 到 支持 HTTP/2 的 那 部 分 用 户 。 在 包含 这 些 数据 的 框 的 右上 角 ， 可 以 看 到 一 个 百 分 
比 ， 它 表示 支持 程度 ， 如 图 11-18 所 示 。 


四 汪汪 G00 
ee Site 6854% + 13.48% = 82.02% 


支持 部 分 支持 总 支持 率 


图 11-18 导入 Google Analytics 数据 后 ，Can I Use 的 功能 的 支持 公式 。 所 有 网 站 数据 
都 是 从 Google Analytics 导入 的 


我 导入 Weekly Timber 的 数据 时 ， 可 以 看 到 大 约 18% 的 网 站 访问 者 正在 使 用 不 支持 HTTP/2 
的 浏览 器 。 这 也 是 一 个 保守 的 估计 ， 因 为 本 例 中 的 “部 分 ”支持 并 不 意味 着 该 部 分 中 的 每 个 用 户 
都 可 以 使 用 HTTP/2。 

有 了 这 些 数据 ， 就 必须 做 出 决定 。 如 果 访 问 Weekly Timber 的 用 户 中 大 约 有 20% 不 能 使 用 
HTTP/2， 那么 对 这 两 部 分 用 户 进行 优化 似乎 是 合理 的 。 也 就 是 说 ， 重 要 的 是 要 记 住 : 这 些 数据 
会 随 着 网 站 以 及 导入 数据 的 时 间 而 变化 。 要 利用 你 网 站 的 数据 做 出 明智 的 决定 ! 

有 了 数据 之 后 , 你 现在 可 以 以 一 种 对 两 种 协议 的 用 户 均 有 益 的 方式 提供 资源 了 。 开 始 优化 吧 ! 


11.4.3 ”根据 浏览 器 功能 提供 资源 


如 何 基于 用 户 的 HTTP/2 支持 向 他 们 提供 内 容 ， 取 决 于 对 使 用 中 的 协议 版 本 的 检测 。 如 果 可 
以 检测 ， 就 可 以 修改 向 浏览 需 发 送 HTML 的 方式 。 
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请 记 住 ,HTTP/1 和 HTTP/2 在 优化 技术 上 的 唯一 真正 区 别 是 ， 前 者 在 资源 合并 时 性 能 更 好 ， 
后 者 在 资源 粒度 更 细 时 性 能 最 好 。 当 可 以 更 改 包 含 正 在 运行 的 HTML 的 HTTP 响应 并 修改 资源 
加 载 方式 时 ， 你 就 能 完全 控制 为 每 个 用 户 部 分 传输 的 资源 。 

开始 之 前 ， 需 要 为 Node 安装 一 个 名 为 jsdom 的 包 。 这 个 包 人 允许 你 在 Node 中 修改 服务 器 上 
的 HTML 内 容 ， 就 像 在 浏览 器 中 使 用 window .document 对 象 提供 的 熟悉 的 方法 一 样 。 知 要 安 
装 此 插件 ， 请 转 到 客户 网 站 的 根 文件 夹 ， 并 键入 npm i jsdom,， 然后 键入 git checkout -f 
protocol-detection 以 更 新 代码 , 之 后 即 可 开始 解决 这 个 问题 。 如 果 想 跳 转 到 完成 后 的 代码 ， 
可 以 在 终端 中 键入 git checkout-f protocol-detection-complete。 


1. 检测 协议 版 本 

所 有 操作 的 第 一 步 , 是 确定 在 请 求 中 运行 的 协议 版 本 。 要 测试 这 一 点 , 需要 一 个 支持 HTTP/2 
的 现代 浏览 器 ， 如 Chrome 或 Firefox， 以 及 另 一 个 不 能 使 用 HTTP/2 的 旧 浏 览 器 。 我 获取 了 安装 
IE10 的 免费 Windows 7 虚拟 机 。 如 果 没 有 像 VMWare 这 样 的 付费 虚拟 机 程序 ， 可 以 获取 名 为 
virtualbox 的 免费 虚拟 机 程序 。 如 果 你 的 计算 机 上 安装 了 较 旧 的 Web 浏览 占 ， 请 使 用 该 浏览 器 进 
行 测试 。 

检测 协议 版 本 很 简单 。 用 于 在 Node 中 创建 HTTP/2 服务 器 的 spdy 包 ， 其 request 对 象 中 
有 一 个 名 为 isspdy 的 成 员 属性 。 虽 然 这 个 属性 的 名 称 并 不 像 你 想象 中 的 那样 简单 , 但 它 可 以 指 
示 当 前 连接 是 否 使 用 HTTP/2。 在 文本 编辑 器 中 打开 http2js， 在 contentType 变量 声明 之 后 ， 
添加 代码 清单 11-6 中 粗 体 显示 的 行 。 


代码 清单 11-6 检查 HTTP 版 本 


var filename = path.join(pubDir, request .url), 
contentType = mime.lookup (filename), 
protocolVersion = request.isSpdy ? "http2" : "httpl"; 


从 此 , 你 将 使 用 这 一 行 代码 逻辑 来 确定 如 何 调整 HTML,， 以 便 容纳 这 两 种 协议 的 用 户 。 我 们 
检查 request .isspdy 对 象 成 员 的 值 ， 并 基于 其 布尔 值 ， 分 配 一 个 字符 串 值 "http2" 或 
"httpl"。 接 下 来 ， 当 用 户 降 级 到 HTTP/1 时 ， 使 用 jsdon 包 向 <html> 标 签 添加 一 个 类 。 

为 什么 要 这 样 做 ? 原因 很 简单 : 当 你 在 <html> 标 签 中 添加 一 个 类 来 标识 用 户 的 协议 何 时 降 
级 时 ， 即 可 更 改 在 CSS 中 传输 资源 的 方式 。 默 认 情 况 下 ,你 编写 的 CSS 是 为 了 优先 以 对 HTTP/2 
最 佳 的 方式 传输 资源 ， 因 此 仅 当 协议 降级 时 才 需 要 修改 。 


2. 添加 HTTP/1 类 

要 使 用 jsdom 将 HTTP/1 类 添加 到 文档 ， 需 要 对 HTTP/2 服务 需 的 代码 进行 一 些 调整 。 切 换 
到 代码 的 protocol-detection 分 支 时 ， 服 务 器 推送 的 逻辑 应 该 已 被 删除 ， 这 将 使 事情 比 你 希 
望 容纳 所 有 内 容 时 简单 得 多 。 

在 为 每 个 请 求 设置 头 部 的 代码 中 , 查找 response .writeHead 调用 。 可 以 在 此 之 后 插入 代 
码 清单 11-7。 
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代码 清单 11-7 在 HTTP 版 本 降级 时 ， 向 <html> 标 签 添加 类 


从 文件 系统 检查 是 否 使 用 HTTP/1， 以 及 请 
读 取 资 源 求 的 资源 是 否 是 HTML 文件 
if (protocolVersion === "httpl" && filename.indexOof(".html") !== -1)f{ 
fs roadp i le(t i Eenane, function ern data){ | 为 <html> 标 签 
一 jsdom.env(data.toString(), functionl(error, window)t{ :天 
添加 httpl 类 
window.document .documentElement. 


， ] 击 
jsdom 读 取 文 classList.add(protocolVersion); 


件 内 容 , 并 创建 


4 Var newDocument = "<!doctype html>" + window.document. 
二 对 documentElement .outerHTML; 
As response.end (newDocument ) ; 二 
人 人 修改 后 的 文档 内 容 
" 被 发 送 到 浏览 器 


和 学 
} 


前 进 方向 是 正确 的 ,但 需要 对 服务 器 代码 做 进一步 修改 。 如 果 请 求 降级 为 HTTP/1 并 且 请 求 
的 资源 是 HTML 文档 ， 将 截取 并 修改 请 求 的 内 容 ， 但 当 传人 的 请 求 与 该 条 件 不 匹配 时 ， 会 出 问 
题 。 需 要 用 else 条 件 隔离 其 他 请 求 ， 如 代码 清单 11-8 所 示 。 


a ee ` 二 < 
代码 清单 11-8 ”隔离 不 需要 修改 的 其 他 请 求 
elSset 
Var fileStream = fs.createReadStream(filename); 
fileStream.pipe (response); 
fileSstream.on ("finish", response.end); 


} 


确保 将 slse 条 件 放 在 检查 协议 版 本 和 HTML 资源 请 求 的 初始 if 条 件 之 后 ,否则 将 触发 服 

完成 后 ， 使 用 Node 运行 服务 器 ， 并 在 现代 浏览 器 中 打开 网 站 。 你 将 看 到 响应 不 变 。 但 是 如 
果 在 不 支持 HTTP/2 的 浏览 器 中 打开 网 站 ， 你 会 注意 到 <html> 标 签 添加 了 httpl 类 ， 如 图 11-19 
所 示 。 


fIDOCTYPE html PUBLIC “> 
由 -<htm]1 class="http1"> 


图 11-19 ”Web 服务 器 降级 到 HTTP/1 时 ，<html> 标 签 会 在 服务 器 上 被 修改 


实现 这 个 逻辑 后 ， 现 在 可 以 基于 这 个 协议 版 本 类 的 存在 ， 完 全 控制 传输 资源 的 方式 。 打 开 
htdocs/css 文件 夹 中 的 styles.min.css 并 滚动 到 底部 , 将 看 到 某 些 样式 是 在 协议 版 本 为 HITP/1 时 使 
用 雪 怕 图 ( sprite.svg ) 编写 的 。 打 开 https://localhost:8443/index.html， 并 比较 能 够 使 用 HTTP/2 
的 现代 浏览 器 (如 Chrome ) 与 不 能 使 用 HTTP/2 的 浏览 器 (如 正 10 ) 的 请 求 数 ， 你 会 注意 到 支 
持 HTTP/2 的 浏览 器 处 理 了 另外 4 个 对 SVG 图 像 的 请 求 。 不 支持 HTTP/2 的 浏览 器 将 改 为 使 用 雪 
怕 图 ， 使 得 图 像 的 请 求 数量 减少 3 个 。 

这 不 是 减少 服务 器 端 请 求 的 唯一 方法 。 接 下 来 ， 我 们 将 使 用 jsgdom 进一步 减少 对 HTTP/1 
客户 机 的 请 求 , 方法 是 将 多 个 脚本 替换 为 一 个 连接 版 本 , 该 版 本 将 能 够 满足 HTTP/1 的 优化 要 求 。 
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3. 将 多 个 脚本 替换 为 HTTP/1 用 户 的 连接 脚本 

Weekly Timber 网 站 有 很 多 脚本 一 一 实际 上 是 7 个 。 其 中 一 个 是 jQuery 的 CDN 托管 副本 ， 
此 你 真正 应 该 优化 的 脚本 传输 只 有 6 个 。 

假设 在 HTTP/1 服务 器 端 /客户 端 通信 中 ,客户 端 发 起 的 最 大 并 行 请 求 数 通 常 为 6。 如果 可 以 
将 这 6 个 脚本 替换 为 HTTP/1 用 户 的 一 个 连接 版 本 ， 就 可 以 为 这 些 用 户 改 进 网 站 资源 的 传输 。 代 
码 清 单 11-9 显示 了 每 个 页 面 上 的 <script> 标 签 。 


代码 清单 11-9 ”Weekly Timber 网 站 上 的 脚本 
<script src="https://code.jquery.com/jquery-2.2.4.min.js" 
integrity="sha256-BbhdlvQf/xTY9gja0Dgq3HiwQF8LaCRTXxZKRuUutelT44=" 
crossorigin="anonymous"> 


</script> 

<script src="js/jquery.colorbox.min.js"></script> 

<script src="js/colorbox-init.min.js"></script> 以 下 是 在 HTTP/1 

eaript Src /S00 mn je S/SerLot 活 全 连接 

<script src="js/carousel.min.js"></script> a 

<script src="js/lazyload.min.js"></script> 

<script src="js/collapsible-content .min.js"></script> 

pa 二 。 y= 、 人 E23 , 

第 一 个 脚本 是 jQuery 的 CDN 托管 副本 ， 我 们 希望 继续 从 CDN 引用 它 。 而 后 面 6 个 脚本 可 


以 连接 起 来 ， 以 方便 HTTP/1 访问 者 。 我 已 经 在 js 文件 夹 scripts.min.js 中 提供 了 这 些 脚 本 的 连接 
版 本 。 我 们 的 目标 是 使 用 jsdqom 在 服务 器 上 转换 这 个 标记 , 使 其 通过 HTTP/1 访问 站 点 时 ,内 容 
如 代码 清单 11-10 所 示 。 


代码 清单 11-10 ”Weekly Timber 网 站 上 针对 HTTP/1 脚本 的 最 佳 处 理 


<script src="https://code.jquery.com/jquery-2.2.4.min.js" 
integrity="sha256-BbhdlvQf/xTY9gja0Dgq3HiwQF8LaCRTXxZKRUutelT44=" 


crossorigin="anonymous"> 代码 清单 11-9 中 所 有 
ipt Sa 
ee | a 脚本 的 连接 版 本 
«SCOrIipDt Sres"Js/Seripts,. mn, js">/script> 


看 起 来 很 简单 ,但 是 首先 需要 编写 一 些 代码 来 更 改 服务 器 上 的 标记 。 因 为 代码 是 HTTP/2 优 
先 的 ， 也 就 是 说 脚本 在 默认 情况 下 会 被 更 细 粒 度 地 引用 ， 所 以 需要 将 代码 清单 11-9 所 示 的 标记 
转换 为 代码 清单 11-10 所 示 的 标记 。 这 将 在 服务 器 代码 部 分 完成 : 当 用 户 通过 HTTP/1 连接 请 求 
HTML 文档 时 ， 可 以 在 这 部 分 代码 中 转换 响应 。 这 段 代 码 显 示 在 代码 清单 11-11 中 ， 添 加 的 行 以 
粗 体 显示 。 


代码 清单 11-11 基于 HTTP 版 本 转换 脚本 的 传输 


获取 所 有 非 CDN 


入 、 
jsdom.env (data.toString(), function(error, window)t{ 托管 的 脚本 
window.document .documentElement .classList.add(protocolVersion); 


获取 引用 CDN 托 var Scripts = window.document. 

管 版 jQuery 的 querySelectorAll("script:not([crossorigin])"), 
BoriotS 元 岩 jQueryScript = window.document. 

加 querySelector("script[crossorigin]"), 
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concatenatedScript = window.document .createElement ("script"); 
ConcatenatedScript.src = "js/scripts.min.js"; 


for(var i in scripts)t{ 


scripts[i] .remove(); 创建 一 个 新 的 <script> 
移 除 所 有 非 } 元 素 ， 引 用 连接 脚本 
CDN 托管 的 
元 素 jQueryScript .parentNode . 


insertBefore (ConcatenatedScript，JjQueryScript.nextSibling)， 


Var newDocument = "<!doctype html>" + 
window.document .documentElement .outerHTML; 
response.end (newDocument ) ; 
添加 新 的 <script> 


3 元 素 ， 指 向 连接 脚本 
进行 此 更 改 后 ， 重 启 服务 器 。 人 然后 在 支持 HTTP/2 的 浏览 器 中 打开 该 网 站 ,会 看 到 脚本 粒度 
不 变 。 如 果 在 较 旧 的 浏览 絮 ( 如 I 下 10 ) 中 打开 该 网 站 ， 将 看 到 如 图 11-20 所 示 的 内 容 。 


https://code.jquery.com/iquery-2.2.4.min.js GET 200 
fis/scripts,min.js GET _200 


图 11-20 “客户 网 站 为 HTTP/1 浏览 器 传输 连接 脚本 


这 种 方法 虽然 不 可 靠 ， 而 且 只 是 概念 证 明 , 但 它 说 明 : 你 可 以 以 一 种 对 每 个 人 都 有 利 的 方式 
提供 资源 。 如 果 这 正 是 你 想 采 取 的 方法 ,那么 需要 考虑 一 些 问题 。 


4. 一 些 考虑 事项 

如 果 你 决定 开始 这 项 工作 ， 就 必须 为 如 何 为 各 种 协议 版 本 定制 优化 做 出 一 些 决 定 。 

第 一 个 决定 取决 于 你 是 否 需要 调整 网 站 以 适应 不 同 用 户 的 能 力 。 有 些 网 站 非常 简单 ,两 个 协 
议 版 本 都 能 很 好 地 为 它们 服务 ; 而 有 些 网 站 显然 更 复杂 。 另 一 个 需要 考虑 的 方面 是 用 户 浏览 器 的 
能 力 ， 之 前 已 经 介绍 过 。 

第 二 个 决定 取决 于 你 可 使 用 的 技术 。 例 如 ,在 PHP 服务 器 上 ,可 以 使 用 $_SERVER["SERVER_ 
PROTOCOL"] 环境 变量 发 现 协议 版 本 。 代 码 清单 11-12 展示 了 如 何 使 用 这 个 变量 来 影响 资源 的 提 
供 方 式 。 


代码 清单 11-12 PHP 根据 协议 提供 资源 


无 论 哪 种 协议 版 本 
| 都 要 加 载 的 脚本 
协议 版 本 是 <script src="https://code.jquery.com/jquery-2.2.4.min.js" 
HTTP/1 时 integrity="sha256-BbhdlvQf /xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" 
加 载 的 脚本 crossorigin="anonymous"> 
</script> 
<?php if($_SERVER["SERVER_PROTOCOL"] == "HTTP/1.1"){ ?> 


<script src="js/scripts.min.js"></script> 
<?php }else{ ?> 


<script src="js/jquery.colorbox.min.js"></script> 协议 版 本 是 
<SCript SrC="jSs/COLOrbox=init min, js "S/Seript> HTTP/2 时 加 
<script src="js/scooch.min.js"></script> 载 的 脚本 
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<script src="js/carousel.min.js"></script> 

Script SETos He /ldZvLOdd mn I "S/SGLLDtS 

<script src="js/collapsible-content.min.js"></script> 
人 


如 何 做 到 这 一 点 取决 于 使 用 的 服务 器 端 语 言 。 根 据 语言 的 不 同 , 这 种 逻辑 的 实现 难度 也 有 所 
区 别 。 

我 们 已 经 了 解 了 HTTP/2 及 其 与 HTTP/1 的 不 同 之 处 ， 以 及 具体 的 实现 方式 ， 下 面 回顾 在 本 
章 学 到 的 知识 。 


11.5 小结 


本 章 介绍 了 一 些 关 于 HTTP/2 的 概念 , 以 及 它 与 HTTP/1 的 区 别 。 本 章 介绍 了 以 下 关键 概念 。 
口 HTTP/1 的 设计 初衷 是 提供 简单 的 功能 ， 而 且 远 比 Web 开发 人 员 最 终 强迫 它 做 的 要 简单 。 
结果 ， 缺 少 连 接 多 路 复 用 和 未 压缩 头 部 等 问题 ， 导 致 其 性 能 下 降 。 
口 HTTP/2 从 Google 的 实验 性 SPDY 协议 演变 而 来 ,并 逐渐 解决 了 并 行 连接 和 未 压缩 头 部 的 
限制 问题 。 
口 你 编写 了 一 个 Node 驱动 的 HTTP/2 服务 器 ， 并 亲身 体验 了 HTTP/2 的 好 处 。 
D HTTP/2 需要 对 我 们 的 优化 方式 进行 一 些 更 改 。 在 这 个 新 版 本 的 协议 中 ， 曾 经 鼓励 开发 人 
员 将 捆绑 资源 、 雪 更 图 和 资源 内 联 等 组 合 起 来 的 优化 实践 ， 现 在 变 成 了 反 模 式 。 
口 服务 器 推送 让 你 能 够 享受 资源 内 联 的 性 能 优势 ， 但 不 会 出 现 内 联 带 来 的 任何 问题 ， 如 可 
维护 性 和 缓存 问题 。 
口 如 果 你 运行 的 是 HTTP/2 服务 器 ， 并 且 相 当 一 部 分 用 户 使 用 的 浏览 器 只 支持 HTTP/1， 那 
么 可 以 调整 资源 传输 ， 使 其 对 每 个 人 都 是 最 佳 的 。 

本 书 已 经 接近 尾声 ， 在 正式 结束 之 前 ， 我 们 将 花 点 时 间 讨 论 如 何 使 用 名 为 gulp 的 JavaScript 
任务 运行 器 ,自动 化 之 前 学 到 的 许多 优化 实践 。 等 你 合 上 这 本 书 的 时 候 ， 你 将 不 仅 拥有 让 网 站 快 
速 运行 的 技术 知识 ， 而 且 能 够 自动 化 这 些 技术 ! 


使 用 gulp 自动 化 优化 任务 


本 章 内 容 

口 了 解 gulp 的 工作 原理 以 及 应 使 用 它 的 原因 
口 构建 项 目 以 使 用 gulp 

口 安装 gulp 插件 

口 理解 gulp 任务 的 工作 原理 

口 为 项 目 编写 任务 

口 在 客户 网 站 上 测试 基于 gulp 的 构建 系统 


网 站 性 能 优化 中 最 糟糕 的 部 分 就 是 其 重复 性 。 缩 小 这 个 CSS、 丑 化 那个 JavaScript、 优 化 那 
些 图 像 等 ， 所 有 这 些 重要 (但 让 人 麻木 ) 的 工作 都 可 能 影响 你 的 工作 热情 。 

令 人 欣 感 的 是 ， 有 一 个 工具 可 以 自动 完成 所 有 这 些 乏 味 的 任务 一 一 gujp。gulp 是 一 个 基于 
Node 的 构建 系统 ， 它 可 以 使 你 的 工作 流 更 加 高 效 ， 为 你 节省 时 间 。 

本 章 将 学 习 gulp 及 其 工作 原理 。 我 们 将 创建 一 个 最 适合 在 前 端 开 发 项 目 中 使 用 gulp 的 文件 
夹 结 构 。 定 义 好 这 个 结构 之 后 ， 还 将 安装 自动 化 优化 任务 所 需 的 gulp 插件 。 

说 到 任务 ， 我 们 将 剖析 gulp 任务 ， 然 后 编写 任务 来 帮助 你 将 从 本 书 中 学 到 的 优化 技术 自动 
化 ,包括 缩小 HIML、 从 LESS 文件 中 编译 和 缩小 CSS、 丑 化 JavaScript 和 优化 图 像 。 我 们 还 将 
编写 监听 项 目 文件 更 改 的 任务 ,并 在 文件 更 改 或 添加 到 项 目 中 时 ， 自 动 运行 相关 任务 。 最 后 编写 
一 个 构建 任务 来 编译 项 目 并 部 署 。 

一 旦 编写 并 定义 完 这 些 任 务 ， 你 就 可 以 启动 所 有 任务 ， 并 在 Weekly Timber 网 站 上 进行 尝 
试 ， 看 看 它们 是 如 何 工作 的 。 最 后 ， 我 们 将 介绍 gulp 生态 系统 中 存在 的 其 他 gulp 插件 ， 以 及 
如 何 找 到 更 多 插件 来 自动 化 各 种 任务 ( 即使 它们 可 能 与 改善 网 站 性 能 无 关 )。 现 在 让 我 们 开始 
gulp 之 旅 吧 ! 


12.1 天 于 gulp 


Node 成 为 主流 后 , 就 成 了 Web 开发 人 员 创 建 各 种 有 用 工具 的 “渠道 ”。 不 和 久 以 后 , 它 就 被 用 
于 创建 复杂 的 工具 ， 如 单元 测试 软件 、 包 管理 顺 ， 甚 至 是 构建 系统 。gulp 是 一 个 基于 Node 的 构 
建 系统 。 本 将 学 习 为 什么 应 该 考虑 使 用 gulp， 以 及 gulp 的 工作 原理 。 
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注意 : 本 章 假设 你 在 使 用 gulp 4 
事实 证 明 ， 写 一 本 技术 书 可 能 面临 有 趣 的 挑战 。 扎 写本 书 时 ，gulp 4 还 处 于 待 发 布 状态 ， 
最 新 发 布 的 是 gulp 3。 你 读 到 本 章 时 ， 也 许 依 然 是 这 个 状态 。 这 可 能 会 改变 用 npm 安装 gulp 
包 的 方式 。 不 过 ， 别 担心 ， 到 时 候 我 会 为 你 提供 指导 。 


12.1.1 为 什么 要 使 用 构建 系统 


gulp 自称 是 流 式 构建 系统 。 它 能 为 你 自动 完成 任务 , 否则 你 必须 自己 完成 。 使 用 构建 系统 后 ， 
你 就 可 以 专注 于 提高 生产 效率 。 

“但 我 为 什么 要 使 用 构建 系统 呢 ? 现在 做 事 的 方式 对 我 来 说 已 经 足够 好 了 !” 当 这 样 的 工具 开 
始 变 得 越 来 越 普遍 时 ， 我 就 这 样 对 自己 说 ， 而 且 多 数 情况 下 ， 我 过 去 工作 的 方式 还 不 错 。 

只 是 重复 性 很 强 。 我 在 许多 项 目 中 使 用 LESS 资源 ， 每 当 修改 LESS 文件 时 ， 我 都 会 经 历 一 
个 如 图 12-1 所 示 的 过 程 。 


修改 LESS 文 件 保存 修改 在 终端 中 重新 重新 加 载 页 表 


编译 CSS 
图 12-1 用 于 将 LESS 编译 为 CSS 的 手动 工作 流 


这 有 用 吗 ? 当然 ! 但 是 当 你 第 500 次 这 样 做 时 ， 你 难道 不 会 发 疯 吗 ? 当然 会 ! 虽然 这 个 过 程 
不 需要 很 长 时 间 ， 但 是 想 想 吧 ， 当 你 无 限 次 重复 这 个 过 程 时 ， 浪 费 了 多 少时 间 : 你 修改 一 处 、 保 
存 文件 、 切 换 到 终端 并 运行 命令 来 编译 CSS， 再 切换 到 浏览 器 并 重新 加 载 页 面 。 一 直 重 复 , 直到 
你 的 手 在 你 30 岁 时 就 已 皮肤 粗糙 。 好 吧 ， 虽 然 这 个 形容 有 些 夸 张 ， 但 它 确实 是 重复 的 。 使 用 构 
建 系统 ， 你 就 可 以 更 改 工 作 流 ， 如 图 12-2 所 示 。 


修改 LESS 文 件 保存 修改 构建 系统 自动 重新 编译 


CSS 并 重新 加 载 页 面 


图 12-2 将 LESS 编译 成 CSS 的 一 种 自动 化 工作 流 。 开 发 人 员 唯 一 要 执行 的 任务 是 
更 改 并 保存 ， 而 构建 系统 则 为 我 们 构建 CSS 并 重新 加 载 页 面 


这 个 新 的 工作 流 可 以 使 你 集中 精力 提高 工作 效率 。 你 不 必 在 终端 中 不 断 地 重新 运行 命令 ,而 
只 需 启动 一 次 构建 系统 ， 然 后 集中 精力 编辑 CSS$， 并 且 在 更 改 时 就 能 看 到 其 显示 在 浏览 器 窗口 。 

当然 ,构建 系统 不 仅 可 以 用 来 将 LESS 文件 编译 为 CSS， 而 且 你 还 可 以 使 用 它 在 这 个 过 程 中 
缩小 CSS 和 其 他 资源 、 优 化 图 像 ， 以 及 执行 构建 系统 的 插件 生态 系统 允许 你 执行 的 任何 操作 。 
使 用 gulp 时， 你 几乎 可 以 自动 化 各 种 任务 。 在 我 编写 本 书 时 ，gulp 生态 系统 有 大 约 2500 个 插件 
可 供 下 载 和 使 用 。 

现在 你 已 经 知道 了 构建 系统 (如 gulp ) 可 以 为 工作 流 带 来 的 一 些 好 处 ， 可 能 想 知 道 gulp 是 
如 何 工作 的 。 让 我 们 一 起 来 探 个 究竟 ! 
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12.1.2 gulp 的 工作 原理 


如 前 所 述 ，gulp 自称 是 一 个 流 式 构建 系统 ， 但 这 意味 着 什么 呢 ? 流 是 gulp 构建 过 程 中 转换 
数据 的 核心 。 你 可 以 链接 多 个 流 来 创建 任务 。 我 们 先 看 看 流 是 如 何 工作 的 。 


1. 流 的 工作 原理 
流 是 IO 的 一 个 旧 概 念 , 在 gulp 中 , 它 人 允许 你 通过 插件 转换 数据 的 输入 ,然后 将 转换 的 输入 
作为 输出 进行 管道 传输 。 图 12-3 展示 了 流 中 与 编译 LESS 文件 相关 的 单 点 处 理 。 


将 CSS 编 译 成 

LESS 文 件 

12-3 流 的 概念 。 本 例 中 ， 输 入 由 导入 流 的 LESS 文件 组 成 ， 然 后 流 将 LESS 文件 
编译 为 CSS， 并 通过 管道 输出 CSS 文件 


这 是 gulp 中 的 数据 IO 的 最 简单 表示 。 输 入 数据 通常 是 磁盘 上 的 文件 , 通过 管道 传输 到 一 个 
由 茶 种 插件 转换 的 流 。 转 换 后 的 数据 随后 从 流 中 输出 ， 然 后 被 写 人 磁盘 ,或 在 写 人 之 前 被 传递 到 
其 他 流 。 图 12-4 展示 了 一 个 多 次 转换 数据 的 链 式 流 。 


LESS 文 件 流 CSS 文 件 流 缩小 后 的 CSS 


将 CSS 编 译 成 缩小 CSS 

LESS 文 件 

图 12-4 数据 通过 管道 进出 多 个 流 的 示例 。 第 一 个 流 将 LESS 文件 编译 成 CSS， 然 后 
将 CSS 通过 管道 传输 到 另 一 个 流 中 并 缩小 它 


链 式 流 允许 我 们 获取 相同 的 输入 并 多 次 转换 。 可 以 根据 需要 链接 任意 多 个 流 ,， 完成 后 ， 将 其 
传递 给 将 输出 写 入 磁盘 上 文件 的 处 理 程序 。 在 前 面 的 例子 中 ， 你 接受 一 个 LESS 文件 作为 输入 ， 
并 将 其 传递 给 一 个 流 以 将 其 编译 成 CSS， 然 后 将 该 输出 作为 输入 导入 另 一 个 流 进行 缩小 。 

你 已 经 理解 了 流 的 概念 ， 下 面 我 们 谈 谈 gulp 任务 。 

2. 任务 的 工作 原理 

任何 数量 的 流 都 是 所 谓 的 任务 的 构建 块 。 在 gulp 中 ,任务 负责 完成 从 磁盘 读 取 数 据 开 始 的 
特定 事情 (或 一 组 事情 )。 图 12-5 概述 了 具有 单个 流 的 简单 任务 。 
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buildcss 任 务 


源 文 件 


/src/less/main.less 


流 


/dist/css/styles.css 


目标 文件 


图 12-5 任务 概述 。 该 任务 由 其 名 称 builacss 标识 ， 并 以 磁盘 上 名 为 main.less 的 LESS 
源 文 件 开始 。 此 文件 通过 管道 传输 到 一 个 流 , 该 流 将 main.less 编译 为 一 个 CSS 文 
件 ， 然 后 该 CSS 文件 从 流 中 输出 并 作为 styles.CSS 保存 到 磁盘 


这 就 是 整个 任务 。 它 是 一 个 流 的 包装 器 ， 始 于 来 自 文件 系统 的 输入 , 终于 把 流 输出 回 写 到 文 
件 系统 的 另 一 个 位 置 。 

一 项 任务 通常 归 为 一 个 关注 点 。 本 例 中 ， 图 12-5 所 示 的 puilqcss 任务 处 理 项 目 中 与 CSS 
相关 的 部 分 。 为 了 缩小 HTML ， 需 要 编写 另 一 个 单独 的 任务 。 其 他 任务 也 一 样 ， 比 如 优化 图 像 和 
丑化 JavaScript。 

可 以 为 项 目 定义 任意 数量 的 必 备 任务 。 组 合 这 些 任务 的 代码 时 ， 需 要 创建 项 目的 构建 系统 ， 
这 也 称 为 gulpfile。 然 而 ， 在 开始 编写 gulpfile 之 前 , 需要 先 为 项 目 创建 一 个 文件 夹 结构 ， 然 后 安 
装 gulp 和 相应 的 插件 。 


12.2 ”奠定 基础 


开始 为 项 目 编写 gulpfile 之 前 , 需要 为 项 目 建立 一 个 文件 夹 结构 , 然后 安装 需要 的 所 有 插件 。 
我 们 先 整理 一 下 文件 夹 。 


12.2.1 组织 项 目 文 件 夹 


创建 一 个 新 项 目 时 , 第 一 件 事 就 是 为 其 设置 一 个 文件 夹 结构 。 即 使 在 使 用 构建 系统 时 也 是 这 
样 ， 但 它 确实 有 些 不 同 。 

如 前 所 述 , 任务 从 源 文件 的 输入 数据 开始 , 以 写 入 磁盘 的 输出 数据 结束 。 根据 这 个 工作 流程 ， 
你 要 编辑 的 是 源 目录 中 的 文件 ， 并 使 用 构建 系统 将 所 有 内 容 编 译 到 发 行 目 录 。 图 12-6 展示 了 这 


一 流程 。 
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源 目 录 分 发 目录 
[= FN\ 


STC gulpfile.js 


通过 gulp 处 理 
输入 文件 


图 12-6 构建 系统 从 源 目录 (本 例子 中 是 src ) 获取 文件 进行 处 理 ， 并 将 输出 写 人 发 行 
目录 (名 为 dist) 


开始 前 ， 请 在 计算 机 上 创建 一 个 新 文件 夹 ( 名 字 随 意 )。 然 后 进入 该 文件 夹 并 创建 一 个 名 为 
src 的 文件 夹 ， 它 是 你 编辑 文件 的 地 方 。 你 可 能 没有 自己 的 项 目 ， 所 以 将 使 用 Weekly Timber 网 站 
的 文件 填充 这 个 文件 来。 要 实现 这 一 点 ， 可 以 使 用 git 命令 从 远程 存储 库 拉 取 网 站 : 


git clone https://github.com/webopt/chl2-weekly-timber.git ./src 


这 个 操作 将 为 构建 系统 提供 一 些 可 构建 的 内 容 。 此 命令 完成 后 , 需要 在 项 目的 根 目录 下 创建 
一 个 名 为 dist 的 文件 夹 。 完 成 后 ， 你 将 拥有 一 个 如 下 所 示 的 文件 夹 结构 : 
/ 
ng 
js 
less 
dist 
文件 夹 结构 如 此 设置 时 , 你 就 可 以 正式 开始 了 。 请 注意 , 你 的 项 目 不 一 定 非 要 遵循 这 种 精确 
的 结构 ， 一 般 将 工作 所 在 的 文件 夹 与 构建 系统 输出 文件 的 文件 夹 分 开 即 可 。 接 下 来 ， 安 装 gulp 
及 其 工作 所 需 的 插件 。 


12.2.2 ”安装 gulp 及 其 插件 


使 用 gulp 进行 任何 操作 之 前 ,需要 在 系统 上 全 局 安装 gulp 的 命令 行 界面 ,这 样 即 可 通过 gulp 
命令 处 理 gulpfile。 使 用 如 下 命令 进行 安装 : 

npm install -g gulp-cli 

以 后 不 必 再 次 运行 此 命令 , 因为 gulp 程序 将 能 够 在 系统 上 全 局 访问 。 然后 , 使 用 npm 初始 
化 项 目 目录 : 

npm init 

执行 此 命令 时 ,程序 将 询问 项 目 名 称 、 版 本 号 和 其 他 信息 。 就 本 章 工 作 而 言 ， 这 里 输入 的 内 
容 并 不 十 分 重要 ， 因 此 请 输入 你 认为 必要 的 值 ， 省略 那些 不 确定 或 不 关注 的 值 。 它 们 主要 与 你 自 
己 的 项 目 或 打算 在 npmjs.com 上 发 布 的 npm 模块 相关 。 
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不 过 这 条 命令 的 作用 是 创建 一 个 名 为 package.json 的 文件 ， 该 文件 负责 记录 项 目 安装 的 所 有 
模块 。 这 使 得 项 目 可 移植 ， 因 此 就 不 需要 分 发 那些 使 用 npm 安装 的 模块 。 在 npm 的 安装 命令 中 
使 用 --save 标志 时 ， 它 会 将 模块 信息 写 入 package.json。 下 面 可 以 开始 安装 gulp 了 ! 

1. 安装 gulp 

之 前 说 过 ， 根 据 gulp 的 状态 ， 版 本 3 可 能 是 最 新 的 版 本 (但 将 来 可 能 会 升级 )。 万 一 当 你 阅 
读本 书 的 时 候 gulp 已 经 更 新 ， 你 需要 确保 自己 用 的 是 gulp 4 而 不 是 gulp 3。 首 先 使 用 npm 检查 
远程 包 存 储 库 中 可 用 的 gulp 的 最 新 版 本 : 

npm show gulp version 

这 个 命令 完成 后 ， 你 将 得 到 包 的 版 本 号 。 如 果 收 到 一 个 以 4 开头 的 响应 (例如 ，4.0.0 或 类 
似 的 )， 那 就 正好 ， 可 以 使 用 npm 正常 安装 gulp 包 : 


npm install gulp --save 


如 果 收 到 一 个 以 3 开头 的 响应 ( 例如, 3 .9.1 ), 事情 就 有 点 环 手 了 。 需要 使 用 npm 从 GitHub 
安装 gulp 包 ， 并 指向 存储 库 的 4.0 分 支 。 使 用 以 下 命令 可 以 轻松 完成 此 操作 : 

npm install gulpjs/gulp#4.0 --save 

这 种 语法 可 能 看 起 来 有 点 陌生 ， 但 此 处 所 做 的 是 指向 一 个 GitHub 用 户 (gulpjs )、 一 个 存 
储 库 ( gulp ) 和 特定 分 支 (#4.0 )。 这 人 允许 你 从 GitHub 安装 gulp 包 的 版 本 4， 而 不 要 求 可 通过 
npm 提供 gulp 包 。 你 阅读 本 章 时 ， 这 个 仓库 的 #4 .0 分 支 可 能 已 经 在 gulp 4 被 标记 为 最 新 版 本 
之 后 不 再 存在 。 本 例 中 ， 只 需 像 往常 一 样 使 用 npm install gulp 命令 安装 gulp 包 。 

下 面 开始 安装 项 目 所 需 的 插件 。 我 们 将 根据 插件 提供 的 功能 对 其 安装 进行 分 类 , 并 描述 每 个 
插件 将 做 什么 。 

2. 基本 插件 

这 类 插件 是 在 gulp 中 进行 基本 工作 所 必需 的 。 要 安装 这 些 插件 ， 请 键入 以 下 命令 : 


npm install gulp-util del gulp-livereload gulp-ext-replace --save 
这 些 插件 实现 了 表 12-1 所 示 的 功能 。 


表 12-1 基本 gulp 插件 


插 件 名 功 能 

gulp-util 某 些 插件 会 用 它 向 终端 输出 错误 和 诊断 信息 等 信息 

del I 除 文件 和 文件 夹 。 执 行 “清理 ”构建 ( 包括 删除 分 发 文件 夹 和 从 头 开 始 构建 ) 时 非常 有 用 

gulp-livereload 更 改 文件 时 自动 重新 加 载 浏 览 器 。 这 涉及 为 浏览 咒 安装 LiveReload 插件 , 我 们 将 在 编写 完 构 建 
系统 后 介绍 


gulp-ext-replace 允许 为 源 输出 指定 一 个 与 源 输 入 不 同 的 文件 扩展 名 。 使 用 imagemin-webp 将 PNG 和 JPEG 文件 
转换 为 WebP 时 ， 需 要 使 用 此 搬 件 以 保存 扩展 名 为 .webp 的 文件 
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3. 缩小 HTML 的 插件 
缩小 HTML 就 是 一 个 可 以 自动 化 的 优化 任务 。 这 只 需要 安装 名 为 gulp-htmlmin 的 插件 ， 如 


下 所 示 : 

npm install gulp-htmlmin --save 

安装 完成 后 ， 缩 小 HTML 插件 可 供 gulpfile 使 用 。 该 插件 将 所 有 的 空白 和 不 必要 的 字符 从 
HTML 中 取出 ， 这 将 减少 传输 到 客户 端的 字 节 数 。 更 少 的 字 节 意 味 着 更 快 的 页 面 加 载 速度 。 


4. CSS 相关 插件 
Weekly Timber 网 站 使 用 LESS 作为 构建 CSS 的 首选 预 编 译 程序 ， 还 使 用 PostCSS 和 一 组 以 


PostCSS 为 中 心 的 插件 。 要 安装 这 些 捕 件 ， 请 输入 以 下 内 容 : 


npm install gulp-less gulp-postcss autoprefixer au 


Lorem cssnano --Save 


表 12-2 描述 了 这 些 插件 的 功能 。 
表 12-2 CSS 相关 的 gulp 插件 


插 件 名 功 能 

gulp-less 将 LESS 内 容 编译 成 浏览 器 可 以 理解 的 CSS。 如 果 你 是 SASS 用 户 ， 不 要 绝望 ! 如 果 你 的 项 目 依 
赖 于 SASS (12.4 节 ),， 那 么 可 以 使 用 gulp-sass 插件 。Weekly Timber 使 用 LESS， 因 此 你 将 在 本 章 
使 用 这 个 插件 

gulp-postcss 一 个 转换 CSS 的 库 。PostCSS 通过 PostCSS 生态 系统 中 的 插件 来 完成 大 量 任务 

autoprefixer 自动 添加 浏览 器 厂商 前 级 到 CSS 的 PostCSS 插件 。 在 不 使 用 LESS/SASS mixin 或 糟糕 的 复制 / 粘 
贴 工作 流 的 情况 下 ,这 对 向 后 兼容 非常 有 用 。 只 需 编写 无 前 级 的 CSS，autoprefixer 将 负责 浏览 天 
厂商 前 级 的 细节 

autorem 另 一 个 PostCSS 插件 (我 写 的 ! )， 它 将 px 单位 转换 成 rem 单位 。 这 有 助 于 使 页 面 更 易于 访问 ， 
而 不 必 手 动 将 每 个 px 单元 转换 为 rem 

cssnano 一 个 PostCSS 插件 ， 可 以 缩小 CSS 并 对 其 进行 许多 有 针对 性 的 优化 ， 从 而 缩小 文件 


5. JavaScript 相关 插件 
优化 JavaScript 需要 两 个 插件 。 要 安装 它们 ， 请 输入 以 下 命令 : 


npm install gulp-uglify gulp-concat --save 
表 12-3 描述 了 这 两 个 插件 的 功能 。 
表 12-3 ”JavaScript 相关 的 gulp 插件 


插 件 名 功 能 
丑化 JavaScript 文件 。 如 果 不 熟 悉 丑 化 ,可 以 将 其 想象 为 类 似 于 最 小 化 ， 因 为 它 从 JavaScript 文 件 


中 删除 了 所 有 不 必要 的 空白 ， 也 缩短 了 代码 ， 同 时 保留 了 功能 ， 从 而 产生 更 小 的 文件 
连接 JavaScript 文 件 。 虽然 对 于 HITP/2 连接 , 连接 文件 是 一 个 反 模式 , 但 是 你 很 容易 生成 可 有 条 
件 地 用 于 HTTP/1 连接 的 网 站 脚本 的 连接 版 本 


gulp-uglify 


gulp-concat 
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6. 图 像 处 理 插件 
你 可 能 还 记得 , 在 第 6 章 中 ,最 大 的 资源 类 型 往往 是 图 像 。 因 此 ,我 们 需要 找到 一 种 自动 化 
图 像 优化 的 方法 。 事 实证 明 ， 为 了 实现 这 一 点 ，gulp 提供 了 很 多 工具 。 你 需要 安装 以 下 插件 : 


npm install gulp-imagemin imagemin-webp imagemin-jpeg-recompress 
imagemin-pngquant imagemin-gifsicle imagemin-svgo --save 


表 12-4 描述 了 这 些 插件 的 功能 。 
表 12-4 图 像 优化 相关 插件 


插 件 名 功 能 

gulp-imagemin 提供 基本 imagemin 功能 。 你 还 记得 在 第 6 章 中 ， 这 是 一 个 用 于 优化 图 像 的 Node 模 块 。 
可 以 使 用 这 个 gulp 扩展 为 我 们 自动 化 这 个 行为 

imagemin-webp 可 将 图 像 转换 为 WebP。WebP 通常 小 于 PNG 和 JPG 格式 的 图 像 。 Chromium 及 其 衍生 浏览 
器 中 的 WebP 支持 ， 意 味 着 很 大 一 部 分 用 户 可 以 使 用 它们 

imagemin-jpegrecompress ”imagemin 插件 ， 用 于 优化 JPEG 图 像 

imagemin-pngquant imagemin 插件 ， 用 于 优化 PNG 图 像 

imagemin-gifsicle imagemin 插件 ， 用 于 优化 GIF 图 像 

imagemin-svgo imagemin 插件 ， 用 于 优化 SVG 图 像 


安装 所 有 这 些 插件 之 后 ， 即 可 编写 gulpfile。 
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gulp 任务 的 组 成 很 简单 。 它 由 许多 相互 链接 的 部 分 组 成 , 这 些 部 分 将 数据 从 一 个 流传 送 到 男 
一 个 流 。 本 节 将 剖析 一 个 gulp 任务 ， 然 后 着 手 建立 gulpfile。 


12.3.1 剂 析 gulp 任 务 


gulp 任务 是 构建 过 程 要 实现 的 目标 的 简洁 表达 。 可 以 将 任务 看 作 所 寻求 的 功能 的 包装 器 。 每 
个 任务 都 由 gulp.task 方法 封装 。 此 方法 通常 接受 一 个 参数 ， 即 指向 执行 任务 的 函数 的 指针 。 
以 下 代码 显示 了 一 个 任务 的 框架 : 


function minifyHTML(){ 
// 任务 代码 


} 
gulp.task (minifyHTML); 
我 们 看 到 名 为 minifyHTML 的 函数 。 可 以 在 其 中 设置 任务 代码 ， 然 后 将 其 绑 定 到 将 定义 它 


的 task 方法 。task 方法 还 有 其 他 用 法 ， 但 这 是 它 最 简单 的 用 法 。 稍 后 将 介绍 其 他 场景 ， 例 如 
以 串 行 或 并 行 方式 运行 任务 。 
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1. 读 取 源 文件 

如 前 所 述 ，gulp 中 的 流 需要 一 个 输入 源 。 向 流 提 供 输入 的 方法 是 gulp .src。 此 方法 接受 一 
个 参数 ， 该 参数 接受 要 作为 输入 读 取 的 文件 字符 串 ( 或 字符 串 数 组 ) 下 面 是 gulp. src 方法 的 
一 个 示例 : 

function minifyHTML () { 


return gulp.src("src/*.html"); 


} 


此 处 使 用 gulp. src 方法 读 取 src 文件 夹 中 的 所 有 HTML 文件 ( 其 位 置 是 相对 于 gulpfile 的 。 
此 处 使 用 的 src/* .html 文件 模式 称 为 flie glob。 如 果 在 终端 上 处 理 文件 已 经 有 很 长 的 时 间 了 ， 
那么 你 一 定 接触 过 这 个 概念 ; 如 果 不 太 熟 悉 glob， 下 面 这 些 示 例 模式 能 够 帮助 你 快速 理解 。 
口 img/* 匹 配 img 文件 夹 中 的 所 有 内 容 。 
口 img/** 匹 配 img 文件 夹 及 其 子 文 件 夹 中 的 所 有 内 容 。 
口 img/* .png 匹配 img 文件 夹 中 的 所 有 PNG 图 像 。 
口 img/**/*.png 匹配 img 文件 夹 及 其 子 文件 夹 中 的 所 有 PNG 图 像 。 
口 img/**/*. {png，jpg} 匹 配 img 文件 夹 及 其 子 文件 夹 中 的 所 有 PNG 和 JPEG 图 像 。 
口 !img/**/*.svg 排除 img 文件 夹 及 其 子 文件 夹 中 的 所 有 SVG 图 像 。 

在 Node 中 所 做 的 大 多 数 工 作 将 使 用 与 这 些 模式 大 体 相 似 的 模式 ， 但 是 file glob 比 仅 使 用 这 
些 模式 要 强大 得 多 。 


2. 在 流 中 移动 数据 

通过 gulp.src 从 磁盘 读 取 输入 后 ， 需 要 一 种 机 制 来 帮助 我 们 将 数据 传送 到 插件 。 这 通过 
pipe 方法 完成 。 下 面 的 示例 使 用 pipe 方法 , 将 数据 从 源 移动 到 htmlmin 插件 ,该 插件 负责 缩 
小 HTML: 


上 谨 


四 
由 


9 


ae 


function minifyHTML(){ 
return gulp.src("src/*.html") 
.pipe(htmlmin()); 

} 

这 个 例子 更 抽象 ， 因 为 它 没有 显示 htmlmin () 实例 是 在 哪里 或 如 何 创建 的 ， 但 是 我 们 很 快 
就 会 介绍 。 此 处 最 重要 的 是 pipe 方法 。 操 作 流 时 ,我们 使 用 了 pipe 方法 ， 并 将 其 链接 在 
gulp.src 之 后 。pipe 方法 为 你 要 向 其 传递 数据 的 函数 接受 一 个 参数 。 本 例 将 使 用 gulp. src 
读 取 数据 ， 然 后 将 该 数据 用 pipe 传递 到 htmlmin() 。htmlmin() 完 成 它 的 工作 后 ， 将 返回 缩 
小 的 HIML 数据 , 然后 可 以 再 次 将 其 用 pipe 传递 到 流 中 的 另 一 点 , 例如 将 缩小 的 输出 写 人 磁盘 
上 的 文件 。 

3. 将 数据 写 入 磁盘 

任务 的 最 后 一 部 分 是 获取 从 源 文 件 转换 的 数据 ， 并 将 其 写 人 磁盘 上 的 文件 。 要 做 到 这 一 点 ， 
需要 使 用 pipe 并 将 gulp .dest 传递 给 它 
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gulp.dest 方法 接受 一 个 参数 ， 该 参数 指定 转换 数据 的 目的 地 。 这 个 参数 不 是 glob， 而 是 
一 个 字符 串 ， 用 于 标识 要 在 磁盘 上 写 人 的 特定 文件 夹 或 文件 。 以 下 是 pipe 方法 的 一 个 示例 ,该 
方法 将 缩小 后 的 HTML 输出 到 gulp .dest : 


function minifyHTML (){ 
return gulps Sro ("Sre/* htmL")} 
.pipe (htmlmin()) 
.pipe(gulp.dest ("dist")); 


} 


这 个 示例 任务 完成 了 以 下 工作 :使 用 gulp .src 从 磁盘 读 取 HTML 文件 ,然后 将 数据 用 pipe 
传递 到 htmlmin ()，, 之 后 通过 gulp .qdest 将 缩小 的 HTML pipe 到 dist 文 件 夹 。 看 出 gulp 任务 
有 多 简单 了 吧 ? 大 多 数 任务 通常 很 得 ， 几 乎 不 需要 配置 。 了 解 了 关于 gulp 方法 的 新 知识 后 ， 你 
就 可 以 写 一 个 gulpfile 了 。 


12.3.2 ”编写 核心 任务 


gulp 通过 gulp 命令 工作 ， 本 章 前 面 安装 gulp-cli Node 包 时 , 已 经 将 该 gulp 安装 在 系统 
上 。 执行 gulp 命令 时 , 会 在 当前 工作 目录 中 查找 名 为 gulpfile,js 的 文件 。 如 果 没 有 找到 gulpfile， 
什么 事情 都 不 会 发 生 ，gulp 将 退出 。 但 是 ， 如 果 找 到 gulpfile，gulp 将 运行 你 在 其 中 指定 的 任何 


想 要 跳 过 ? 
如 果 你 遇 到 困难 了 ， 想 要 跳 过 ,或 者 想 拿 到 已 完成 的 gulp 样板 文件 并 立即 开始 使 用 ， 请 
在 终端 窗口 中 键入 git clone https://github.com/webopt/ch12-gulp.git,， 复制 包 
含 已 完成 的 构建 系统 的 GitHub 存储 库 。 


本 节 将 首先 导入 模块 ， 然 后 完成 每 个 核心 任务 。 完 成 后 ， 即 可 编写 gulpfile 了 。 


1. 导入 模块 
首先 在 项 目的 根 文件 夹 中 创建 名 为 gulpfile.js 的 新 文件 。 在 使 用 gulp 以 及 为 其 安装 的 大 量 插 
件 之 前 ， 需 要 将 它们 导入 gulpfile。 使 用 文本 编辑 器 ， 将 代码 清单 12-1 输入 gulpfile。 


代码 清单 12-1 在 gulpfile 中 导入 所 有 需要 的 模块 


var gulp = require("gulp"), 
util = require("gulp-util"), 构建 系统 工作 所 
del = require("del"), 需 的 基础 模块 


的 模块 extReplace = require("gulp-ext-replace"), 
htmlmin = require("gulp-htmlmin"), 
less = require("gulp-less"), 
postcss = require("gulp-postcss"), 
autoprefixer = require("autoprefixer"), 


缩小 HTML livereload = require("gulp-livereload"), 


构建 LESS 所 需 的 模块 ， 
以 及 PostCSS 插件 
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autorem = require("autorem"), 
cssnano = require("cssnano"), 
uglify = require("gulp-uglify"), 
concat = require("gulp-concat"), 
丑化 和 连接 imagemin = require("gulp-imagemin"), 
JavaScript jpegRecompress = require("imagemin-jpeg-recompress"), 
所 需 的 插件 pngQuant = require("imagemin-pngquant"), 
svgo = require("imagemin-svgo"), 
gifsicle = require("imagemin-gifsicle"), 图 像 优 化 所 
webp = require("imagemin-webp"); 需 的 模块 


这 上段 代码 导入 了 gulp 实现 其 功能 所 需 的 所 有 模块 。 完 成 此 步骤 后 ， 可 以 创建 第 一 个 gulp 任 
务 了 。 


2. 探索 任务 的 总 体 结构 
本 节 编 写 的 大 多 数 任务 将 遵循 一 个 可 预测 的 模式 。 有 些 任 务 可 能 略 有 不 同 , 但 随 着 学 习 的 深 
入 ， 你 应 该 会 熟悉 基本 结构 。 图 12-7 显示 了 任务 将 遵循 的 一 般 结 构 。 


从 磁盘 读 取 源 文件 0 将 输出 写 信 磁盘 


12-7 你 将 为 本 章 的 gulpfile 编写 的 gulp 任务 的 一 般 结构 


本 章 编写 的 任务 几乎 总 是 始 于 从 磁盘 读 取 源 文件 。 随 后 通过 pipe 将 数据 传输 到 与 任务 目标 
相关 的 插件 。 这 些 行 为 包括 缩小 HTML、 优 化 图 像 等 。 完 成 后 ,使 用 gulp .aest 方法 将 文件 写 
和 人 磁盘 。 

并 不 是 每 个 任务 都 一 成 不 变 地 遵循 这 种 模式 。 例 如 , 用 于 清理 构建 和 监听 文件 更 改 的 实用 程 
序 任务 将 明显 不 同 。 我 们 会 处 理 这 些 问 题 并 根据 需要 进行 解释 。 


你 准备 好 开始 编写 gulp 任务 了 吗 ? 下 面 从 编写 HTML 缩小 任务 开始 。 


3. 缩小 HTML 

缩小 是 Web 开发 工具 箱 中 的 基本 优化 方法 之 一 。 虽 然 缩小 HTML 并 非 在 所 有 场景 中 都 能 节 
省 大 量 带宽 ， 但 很 容易 做 到 ， 而 且 gulp 能 使 它 变 得 更 加 容易 。 

在 代码 清单 12-1 中 ， 将 gulp-htmlmin 插件 导入 htmlmin 变量 。 之 后 ， 你 就 可 以 编写 HTML 
缩小 任务 。 在 gulpfile 中 ， 输 入 代码 清单 12-2。 


代码 清单 12-2 HTML 缩小 任务 


任务 函数 
a 下 js 
目标 目录 function minifyHTML () { 需要 处 理 的 HTML 
Var Bre Sore Sb 文件 的 file glob 
dest = "dist"; 
将 Beinn 通过 return gulp.src(src) < 一 读 取 HTML 
piple 传递 到 流 | > .pipe (htmlmin({ 
collapseWhitespace: true, htmlmin 插件 


removeComments: true 使 用 的 配置 项 
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将 缩小 的 HTML })) 
传送 到 目标 目录 .pipe (gulp.dest (dest)) 


竺 : ’ 
.pipe (livereload ()); 告诉 LiveReload 重 


} 新 加 载 浏览 器 窗口 


gulp.task (minifyHTML); < 一 将 minifyHTML 任务 绑 定 到 gulp 


有 一 点 内 容 需要 特殊 处 理 , 但 大 多 数 是 你 将 要 编写 的 其 他 任务 所 共有 的 。 首先 , 使 用 gulp.src 
读 取 磁 盘 上 的 HIML 文件 。 然 后 , 数据 通过 pipe 管道 传送 到 gulp-htmlmin 插件 , 该 插件 将 缩小 HTML。 
你 向 它 传递 了 两 个 选项 : removeCcomments 删除 HIML 中 的 所 有 注释 ; collapsewhitespace 安全 
地 删除 文件 中 的 所 有 空白 ， 而 不 会 影响 内 容 的 完整 性 。 

完成 缩小 工作 后 ， 要 通过 gulp.aest 将 更 改写 人 dist 目录 ， 然 后 将 流通 过 pipe 传输 到 
livereload 模块 , 该 模块 会 向 正在 监听 的 livereload 实例 发 送信 号 , 以 重新 加 载 浏览 器 页 面 。( 本 节 
稍 后 将 讨论 如 何 设置 浏览 器 以 监听 更 改 。) 最 后 ， 需 要 将 minifyHTML 函数 绑 定 到 gulp 的 task 
方法 ， 这 个 方法 负责 设置 HTML 缩小 任务 。 保 存 gulpfile ， 如 果 你 还 没有 的 话 。 在 gulpfile 所 在 
目录 的 命令 行 中 ， 运 行 以 下 命令 : 


gulp MinifyHTML 


这 将 运行 你 编写 的 minifyHTML 任务 。 它 运行 时 ， 你 应 该 能 看 到 如 下 输出 : 


[13:47:33] Using gulpfile /var/www/ch1l2-gulp/gulpfile.js 
[13:47:33] Starting 'minifyHTML'... 
[13:47:33] Finished 'minifyHTML' after 64 ms 


你 的 输出 会 有 一 些 变化 ,但 总 体 看 起 来 应 该 与 此 类 似 。 任 务 完成 后 ， 你 会 注意 到 src 目录 中 
的 所 有 HTML 都 已 被 缩小 ， 并 保存 到 dist 文件 夹 。 

祝贺 你 ! 你 完成 了 第 一 个 任务 。 其 余 任务 的 工作 量 与 此 基本 相同 ,但 复杂 程度 有 所 不 同 。 接 
下 来 处 理 与 CSS 相关 的 任务 。 


4. 构建 LESS 文件 并 使 用 PostCSS 

下 一 个 任务 比 编写 HTML 的 缩小 任务 更 复杂 。 我 们 将 使 用 gulp-less 插件 从 src/less 文件 夹 编 
译 LESS 文件 ,并 通过 gulp-postcss 插件 转换 /优化 编译 的 CSS， 然 后 将 其 写 人 dist/ess 文件 夹 。 此 
任务 中 涉及 的 模块 有 gulp-less ,gulp-postcss .autoprefixer ,autorem 和 cssnano。 要 继续 ,请 在 gulpfile 
中 输入 代码 清单 12-3。 


代码 清单 12-3 LESS 编译 和 CSS 优化 任务 


: main.less 
目录 Var src = "src/less/main.less", 
dest = "dist/css"; 


国 任务 函数 
指定 目标 buildqcSsSs (){ 从 源 目录 读 取 


将 LESS 文件 传输 


到 LESS 编译 器 return gulp.src(src) 


.pipe (less() 


282 第 12 章 使 用 gulp 自动 化 优化 任务 


拦截 错误 
.on("error", functionl(err)t{ 的 回调 
发 生 错 误 util.log (err); 
则 上 报 this.emit ("end"); < 一 结束 错误 处 理 过 程 
中 te 癌 克 
. 自动 将 浏览 器 厂商 前 绥 
将 编译 生成 的 CSS a 添加 到 相关 CSS 属性 
传输 到 PostCSS autoprefixer({ 
browsers: ["last 4 versions"] i 
autorem 将 px 单位 
为 最 近 的 4 个 浏览 转换 为 rem 单位 
器 版 本 添加 前 缀 Se 
NS 本 cssnano () 
])) Te 
.pipe (gulp.dest (dest)) 并 优化 CSS 


.pipe (livereload()); 
} 
将 buildcss 任务 


gulp.task (builgcss); 函数 绑 定 到 gulp 


这 个 任务 虽然 比 之 前 编写 的 缩小 HTML 更 复杂 ， 但 还 算 简单 。Weekly Timber 的 所 有 样式 都 
是 用 LESS 编写 的 ， 主 文件 是 main.less 文件 。 可 以 从 磁盘 读 取 该 文件 ， 并 通过 pipe 将 其 传输 到 
gulp-less 插件 实例 。 这 会 将 LESS 编译 成 CSS。 此 外 ， 错 误 处 理 程序 用 于 捕获 发 生 的 错误 ， 并 通 
过 gulp-util 插件 的 1og 方法 将 它们 记录 到 控制 台 。 

接 下 来 事情 变 得 更 加 复杂 了 。 我 们 在 这 个 项 目 中 使 用 了 3 个 PostCSS 插件 , 它们 都 被 传递 到 
gulp-postcss 插件 实例 ， 分 别 是 autoprefixer、autorem 和 cssnano。 这 些 插件 分 别 会 自动 为 CSS 添 
加 浏览 器 厂商 前 级, 将 px 单位 转换 为 rem 单位 , 缩小 /优化 CSS。 这 一 切 结束 时 , 缩小 后 的 CSS 
将 被 写 人 distcss 目录 。 完 成 此 任务 后 ， 即 可 通过 如 下 方式 运行 该 任务 进行 测试 : 


gulp buildCss 


一 


打开 dist/ess 文件 夹 , 将 看 到 优化 后 的 css 文件 main.css。 现在 ”你 已 经 完成 了 CSS 优化 任务 ! 
接 下 来 执行 JavaScript 任务。 


5. 丑化 并 连接 脚本 

构建 系统 的 JavaScript 优化 任务 包含 两 个 方面 : 丑化 JavaScript 以 减 小 其 大 小 ， 然 后 将 它们 
连接 起 来 。 如 果 有 能 力 同时 为 HTTP/1 和 HTTP/2 提供 最 佳 的 资源 传输 ， 就 要 分 别提 供 连接 和 未 
连接 版 本 的 脚本 集合 。 先 将 代码 清单 12-4 输 入 gulpfile ， 开 始 编写 uglify 任务 。 


代码 清单 12-4 JavaScript 丑化 任务 


任务 函数 
function uglifyJS(){ 


丑化 后 的 脚本 将 
Var To Sr TO jr 写 入 的 目标 目录 
源 file glob I dest, = "dist/je"’; 


return gulp.src(src) 源 文件 被 传输 到 
.pipe (uglify ()) S uglify 插件 
.pipe (gulp.dest (dest)) 
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.pipe(livereload()); 


将 uglifyJsS | } 
任务 函数 绑 定 
到 gulp gulp.task (uglifyJSs); 
这 个 任务 会 在 src/js 文 件 夹 中 递归 查找 JavaScript 文 件 , 并 将 它们 传输 到 gulp-uglify 模 块 实例 。 
完成 后 ， 它 将 把 丑化 后 的 脚本 写 入 disyjs 目录 。 
接 下 来 ， 编 写 捆绑 脚本 的 连接 任务 。 这 和 uglifyJs 任务 一 样 简单 。 在 gulpfile 中 ， 输 入 代 
码 清单 12-5。 


代码 清单 12-5 ”脚本 连接 任务 


要 放置 的 


| 
连接 脚本 IE concatJS () { 源 file | 


2 Var SES EL"dLiSt/ /yp. TLSt/ Jer1iDEe: je] 
目标 位 置 dest = "dist/js", 
coneat Seript =. "ooripte. 了 JS 连接 脚本 的 
en hn 
将 脚本 数据 传送 到 目标 名 称 


return gulp.src(src) 
.pipe(concat (concatScript)) 
.pipe (gulp.dest (dest)) 
.pipe(livereload()); 


gulp-concat 插件 


将 concatvs 任务 


gulp.task (concatJs); 函数 绑 定 到 gulp 


concatJs 任务 的 用 法 稍 后 将 变 得 很 有 趣 , 因为 它 依赖 于 首先 由 uglifyds 任务 处 理 的 文件 。 
之 后 定义 监听 和 构建 任务 时 , 我 们 将 使 用 一 个 特殊 函数 , 该 阴 数 将 确保 在 concatJs 任务 之 前 运 
行 uglifyJs 任务 ， 因 为 它们 相互 依赖 。 

另 一 个 关注 点 是 , 你 需要 在 src file glob 中 排除 scripts,js, 它 将 包含 连接 的 脚本 。 如 果 不 排除 ， 
concat 任务 将 在 每 次 运行 时 递归 捆绑 scripts.js。 这 显然 不 是 最 优 结果 ， 所 以 要 避免 这 种 情况 。 

这 个 任务 接 下 来 的 工作 与 以 前 编写 的 任务 类 似 : 通过 pipe 传输 从 src file glob 读 取 的 数据 ， 
使 用 gulp-concat 处 理 ， 并 将 其 命名 为 scriptsjs， 输 出 到 disyjs 目录 。 下 面 执行 图 像 处 理 任 务 。 


6. 处 理 图 像 优化 

回忆 一 下 第 6 章 的 内 容 ， 如 果 愿 意 优 化 图 像 ， 就 可 以 节省 空间 。 在 大 多 数 情 况 下 ， 你 可 以 做 
到 这 一 点 ， 而 视觉 质量 不 会 有 明显 的 下 降 。 由 于 手动 完成 图 像 优化 会 非常 乏味 ， 所 以 imagemin 
的 gulp 插件 实例 gulp-imagemin 提供 了 第 6 章 中 的 所 有 功能 。 

本 节 将 编写 两 个 与 imagemin 相关 的 任务 : 优化 PNG、JEPG 和 SVG 的 图 像 处 理 主任 务 ， 
以 及 将 PNG 和 JPEG 转换 为 WebP 图 像 的 一 个 单独 的 任务 。 让 我 们 从 编写 图 像 优化 主任 务 开始 ， 
该 任务 将 代码 清单 12-6 输入 gulpfile， 以 处 理 标准 图 像 类 型 。 
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代码 清单 12-6 ”使 用 imagemin 优化 PNG、JPEG 和 SVG 


图 像 优 化 
function imageminMain (){ 任务 函数 从 src/img 目录 读 
于 田 ; 寸 敌 贸 
出 到 目标 目录 dest = "dist/img"; 
y Lot urn gulp.src(src) imagemin-jpeg-recompress 
将 图 像 数据 传输 到 |? Pe ( magemn([ 插件 实例 
gulp-imagemin | jpegRecompress ({ 
max: 90 
Js 设置 最 大 输出 

pngQuant ({ 质量 为 90 

imagemin-pngaquan 1itvy: "45-90" 

插件 实例 四 和 设置 45~90 的 


ifsicl 
0 Sl imagemin-gifsicle 
imagemin-svgo ])) 插件 实例 


插件 实例 .pipe (gulp.dest (dest)) 
.pipe (livereload()); 


} 将 imageminMain 任务 


函数 绑 定 到 gulp 


gulp.task (imageminMain); 


这 项 任务 比 其 他 一 些 任务 更 为 复杂 ,但 仍然 相对 简单 。 读 取 src/img 目录 中 的 所 有 PNG JPEG、 
SVG 和 GIF 文件 ， 并 将 它们 传递 给 gulp-imagemin 插件 实例 。imagemin 有 自己 的 插件 默认 值 ， 
如 果 没 有 提供 插件 ， 它 将 使 用 这 些 默认 值 ; 但 是 由 于 有 大 量 的 imagemin 插件 ， 我 选择 了 一 些 性 
能 比 默认 值 稍 好 的 插件 。 


imagemin 插件 数量 众多 
谈 到 用 imagemin 优化 图 像 时 ,你 可 以 想象 的 每 种 图 像 格式 都 有 大 量 插 件 。 每 种 格式 都 有 
富 的 选择 ， 你 可 以 用 它们 提升 性 能 。 


在 这 个 任务 中 ， 你 依赖 imagemin-jpeg-recompress 、imagemin-pngquant 、imagemin-svgo 和 
imagemin-gifsicle 插件 优化 图 像 。 图 像 被 优化 后 ， 将 写 入 dist/img 文件 夹 。 

以 上 代码 处 理 了 常见 的 图 像 格 式 ， 但 是 如 果 想 利用 WebP 格式 呢 ?” 你 已 经 安装 了 这 个 插件 : 
imagemin-webp。 可 以 用 它 把 现 有 的 PNG 和 JPEG 图 像 转 换 成 WebP。 知 要 将 此 任务 添加 到 构建 
系统 ， 请 将 代码 清单 12-7 添加 到 gulpfile。 


代码 清单 12-7 WebP 转换 任务 


2 0 
指定 目标 目录 从 src/img 目录 读 
为 distimg function imageminWebP() | JPEG 和 PNG 


var SLC = ore/ ime /re/*. {jpg,png}" 
dest = "dist/img" 
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将 图 像 数 据 传输 到 


return gulp.src(src) 
imagemin 插件 


.pipe (imagemin([ 
imagemin-webp Ww webp ({ 
插件 实例 quality: 65 i 
}) 将 质量 设置 
] 为 65/100 
) ) 


.pipe (extReplace(".webp")) 使 用 gulp-ext-replace 
.pipe (gulp.dest (dest)) 插件 将 文件 保存 为 .webp 


将 imagemin- ， ， 
.pipe (livereload()); 
webe 任务 函数 ) 后 缀 
绑 定 到 gulp 
gulp.task (imageminWebP); 


要 同时 尝试 这 两 个 任务 ， 请 运行 以 下 命 
gulp imageminMain imageminWebP 


完成 这 些 任务 后 ， 查 看 dist/img 文件 夹 ， 不 仅 可 以 看 到 优化 的 图 像 ， 而 且 还 可 以 看 到 它们 的 
WebP 版 本 。 祝贺 你 ! 你 已 经 编写 了 一 个 可 以 为 你 转换 所 有 图 像 的 任务 , 这 也 是 gulpfile 中 的 最 后 
一 个 核心 任务 。 

下 一 节 将 编写 buila 任务 (构建 src 目录 中 的 所 有 内 容 ) 和 watch 任务 ( 监视 文件 的 更 改 )。 
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我 们 已 经 为 构建 系统 编写 了 所 有 核心 任务 。 这 些 任务 为 你 执行 了 繁重 的 工作 : 缩小 、 丑 化 、 
图 像 优化 和 构建 CSS 一 一 所 有 你 需要 的 重要 工作 。 

当然 ,你 还 没有 真正 实现 自动 化 。 这些 任务 虽然 有 用 , 但 仍然 要 求 你 在 终端 运行 特殊 命令 来 
执行 所 有 操作 。 你 还 需要 完成 两 项 任务 : 
口 监听 文件 更 改 ， 并 在 发 生 更 改 时 ， 自 动 运行 任务 并 重新 加 载 浏览 器 页 面 的 任务 ; 
口 项 目 完成 并 准备 好 投入 生产 时 ， 对 dist 文 件 夹 执行 清理 已 构建 的 所 有 网 站 功能 的 任务 。 
让 我 们 从 编写 watch 任务 开始 吧 ! 


1. 编写 watch 任务 

watch 任务 与 其 他 任务 一 样 ， 通 过 gulp .task 方法 定义 。 不 过 要 在 里 面 使 用 gulp .watch 
新 方法 。 这 个 方法 有 两 个 参数 : 指定 要 监视 的 文件 的 fle glob 模式 ， 以 及 检测 到 文件 更 改 时 应 运 
行 的 一 个 或 多 个 任务 的 数组 。 代 码 清单 12-8 显示 了 watch 任务 的 全 部 内 容 , 你 将 其 定义 为 default 
任务 。 


代码 清单 12-8 watcnh 任务 


watch 任务 函 四 
告诉 LiveReload 
function watch() 实例 监听 文件 更 改 


livereload. a 
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如 果 HTML 发 、 
生变 化 ， 运 行 如 果 LESS 文件 发 生变 化 ， 
minifyHTMIL, 运行 puilacss 任务 
任务 gulp.wateh("sre/**/*, ,html", minifyHTML); 
gulp.watch("src/less/**/*.less", buildCss); 
gulp.watch("src/js/**/*.js", gulp.series (uglifyJS, concatJSs)); 
gulp.watch("src/img/**/*.{png,jpg,svg,gif}", 
如 果 JavaScript gulp.parallel (imageminMain, imageminWebP)); 
发 生变 化 , 串联 运 | } | 
行 uglifyJs 和 如 果 检 测 到 图 像 发 生 
concatJs 任务 gulp.task("default"，watch) ， 全 人 
将 watch 任务 函数 绑 定 到 


这 项 任务 比 你 以 前 写 的 要 线性 得 多 。 首 先 要 注意 的 是 ， 这 个 任务 被 绑 定 到 一 个 default 标 
签 ,， 这 是 gulp 中 保留 的 标签 。 具 有 此 标签 的 任何 任务 都 不 需要 由 gulp 命令 显 式 调 用 。 用 户 在 定 
义 它 的 gulpfile 的 目录 下 的 终端 输入 gulp 时 ， 它 就 会 被 执行 。 

接 下 来 ,告诉 gulp-livereload 插件 实例 启动 一 个 监听 文件 更 改 的 服务 器 。 当 配置 了 LiveReload 
硬件 的 浏览 器 从 该 服务 器 接收 到 文件 已 更 改 的 信号 时 ， 将 重新 加 载 页 面 。 

为 浏览 器 配置 LiveReload 的 方式 取决 于 你 使 用 的 浏览 器 。Chrome 有 一 个 LiveReload 扩展 ， 
可 以 通过 在 Chrome 的 Web 商店 中 搜索 它 来 进行 安装 。 安 装 此 插件 后 ,可 在 地 址 栏 旁边 看 到 一 个 
小 工具 栏 图 标 ， 如 图 12-8 所 示 。 


性 


单 击 以 启用 
LiveReload 


六 @ 
国 Other Bookmarks 


图 12-8 Chrome 工具 栏 上 的 LiveReload 扩展 图 标 。 点 击 这 个 图 标 会 启用 LiveReload 监听 器 ， 
用 于 接收 本 地 LiveReload 服务 需 在 文件 变化 时 发 出 的 重新 加 载 信号 


LiveReload 也 可 用 于 Firefox 、Opera 和 Safari。 可 以 搜索 浏览 器 的 扩展 存储 库 ， 或 转 到 
livereload.com 以 获取 有 关 不 支持 的 浏览 器 的 其 他 安装 方法 的 详细 信息 。 
编写 完 watch 任务 ， 并 为 浏览 器 安装 LiveReload 扩展 后 ， 可 以 在 终端 中 输入 gulp 命令 启 
动 watch 任务 。 你 将 在 终端 窗口 中 看 到 如 下 输出 : 


[22:36:46] Using gulpfile /private/var/www/ch1l2-gulp/gulpfile.js 
[22:36:46] Starting 'default'... 


任务 不 会 返回 到 命令 行 , 而 是 会 监听 在 watch 任务 函数 中 指定 的 文件 更 改 。 要 测试 这 一 点 ， 
可 以 如 前 几 音 一样， 在 根 文件 夹 中 运行 一 个 http.js Web 服务 器 ， 从 dist 提供 内 容 ， 并 为 该 页 面 启 
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用 LiveReload 浏览 器 扩展 。 要 实现 这 一 点 ， 可 以 从 本 书 前 面 的 任何 示例 Web 服务 器 获取 代码 ， 
或 者 从 GitHub 复制 存储 库 。 然 后 , 在 文本 编辑 器 中 修改 src 目录 中 的 文件 , 你 将 看 到 任务 在 你 进 
行 更 改 时 自动 运行 。 任 务 完 成 时 ， 对 每 个 任务 中 的 gulp-livereload 插件 实例 的 pipe 进行 调用 ， 
向 浏览 需 发 出 重新 加 载 页 面 的 信和 号。 

你 可 能 会 对 这 个 任务 有 异议 ,因为 它 会 阻碍 你 在 终端 上 做 其 他 事情 ,你 当然 可 以 在 后 台 运 行 ， 
但 是 可 能 看 不 到 任何 程序 输出 ( 取决 于 你 的 终端 )， 如 果 遇 到 错误 ， 这 对 开发 可 没 好 处 。 需 要 做 
其 他 事情 的 话 ， 请 打开 男 一 个 终端 窗口 ; 如 果 需 要 退出 gulp， 请 按 Ctrl+C， 程 序 将 停止 。 

你 会 注意 到 两 个 新 方法 series 和 parallel。 两 者 都 接受 要 运行 的 任意 数量 的 任务 ， 区 别 
仅 限 于 : series 一 个 接 一 个 地 运行 指定 的 任务 ,而 parallel 并 联运 行 所 有 指定 任务 。 发 生 更 
改 时 ， 你 会 注意 到 你 在 并 行 运 行 与 imagemin 相关 的 任务 ， 串 行 运行 uglifyJs 和 concatJS 
任务 ， 因 为 concatds 任务 依赖 于 uglifyJs 任务 的 结果 。 

现在 , 我 们 有 了 一 个 完全 自动 化 的 工作 流 。 更 改 会 实时 发 生 ， 而 浏览 器 会 自动 重新 加 载 页 面 
以 显示 更 改 内 容 。 这 不 仅 可 以 为 你 生成 优化 的 网 页 ， 而 且 还 可 以 提高 开发 人 员 的 效率 。 剩 下 的 工 
作 就 是 为 执行 构建 定义 两 个 剩余 的 任务 ， 然 后 就 准备 就 绪 了 。 


2. 编写 buila 任务 
pbuild 任务 是 目前 编写 的 所 有 任务 中 最 简洁 的 。 它 只 有 一 小 段 代 码 , 接受 任务 的 名 称 ， 并 指 
定 一 组 要 串联 运行 的 任务 。buila 任务 如 下 所 示 : 


gulp.task ("build", gulp.parallel (minifyHTML, buildCss, uglifyyJs, 
imageminMain, imageminWebP, gulp.series (uglifyJS, concatJSs))); 
代码 就 这 么 一 点 。 通 过 在 命令 行 输 入 gulp buila 调用 构建 任务 时 ， 数组 中 指定 的 所 有 任 
务 都 将 运行 。 这 个 任务 将 从 src 目录 生成 完整 的 文件 构建 ， 并 将 优化 后 的 文件 输出 到 dist 目录 。 


3. 编写 clean 任务 

有 时 需要 在 执行 构建 之 前 销毁 dist 文件 来。 这 可 能 是 因为 你 曾经 在 src 中 创建 过 资源 ， 但 后 
来 删除 了 ,因此 dist 中 仍然 有 一 些 源 于 之 前 的 构建 的 文件 ， 这些 文件 是 孤立 的 。 此 时 需要 调用 一 
个 任务 ， 清 除 dist 文件 夹 以 执行 清除 构建 。 

之 前 , 我 们 使 用 npm 安装 了 一 个 名 为 del 的 插件 。 它 本 身 不 是 一 个 gulp 插件 , 而 是 一 个 删除 
文件 夹 的 Node 模块 。gulp 的 特性 使 我 们 可 以 编写 任何 有 效 的 Node 代码 并 运行 它 。 唯 一 需要 注 
意 的 是 ， 编 写 的 任何 代码 都 需要 返回 一 个 Vinyl 文件 对 象 。 不 过 本 章 不 会 深入 探索 Vinyl。 

clean 任务 也 简便 、 易 操作 : 


function clean(){ 
return del(["dist"]); 


} 


gulp.task (clean); 


del 模 块 接受 一 个 参数 ,该 参数 是 要 删除 的 一 个 或 多 个 目录 的 数组 。 因 此 ,现在 要 生成 干净 、 
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原始 的 构建 ， 只 需 在 终端 窗口 中 输入 两 个 命令 : 

gulp clean 

gulp build 

这 个 操作 会 在 dist 文 件 夹 中 提供 一 个 洁净 的 构建 并且 可 以 投入 生产 了 。 有 了 它 ,你 就 完全 
自动 化 了 ， 并 且 为 任何 新 的 Web 项 目 做 好 了 准备 。 然 而 ， 结 束 本 书 之 前 ， 我 想 谈 谈 gulp 插件 的 
生态 系统 ， 并 介绍 一 些 其 他 的 插件 ， 它 们 可 能 会 对 你 和 你 的 公司 有 用 。 


12.4 ”深入 理解 gulp 插件 


尽管 你 可 以 在 gulp 任务 中 执行 任何 有 效 的 Node 代码 , 但 很 明显 ，gulp 的 便利 性 和 功能 都 是 
由 许多 可 用 的 gulp 插件 提供 的 。 我 只 向 你 展示 了 一 小 部 分 可 用 的 插件 ， 还 有 更 多 插件 可 供 你 考 
虑 。 本 节 重 点 介绍 几 个 吸引 了 我 的 注意 力 的 插件 。 

口 gulp-changed 插件 允许 你 只 处 理 自 上 次 构建 以 来 发 生 更 改 的 文件 。 这 对 于 那些 往往 长 时 间 
运行 的 任务 〈 例如 执行 图 像 优 化 的 任务 ) 特别 有 用 。 只 处 理 更 改 的 文件 可 以 减少 构建 时 
间 ， 特 别 是 在 你 工作 的 时 候 。 

口 gulp-nunjucks 是 Mozilla Nunjucks 模板 引擎 的 插件 。 可 以 用 它 做 一 些 简单 的 事情 ， 比 如 把 
HTML 分 成 可 重用 的 部 分 ， 并 以 编程 方式 导入 ( 设想 一 些 类 似 于 PHP 的 incluge 和 
require 网 数 的 东西 ), 你 也 可 以 通过 使 用 类 似 Handlebars 的 语法 , 用 它 来 模板 化 并 将 内 
容 插入 HTML 文件 。 这 个 插件 对 于 以 下 开发 者 非常 有 用 : 想 要 提供 静态 站 点 文件 ， 但 希 
望 拥有 一 些 类 CMS 特性 的 灵活 性 。 

口 gulp-inline 可 以 自动 内 联 文 件 。 虽 然 对 于 支持 HTTP/2 的 服务 器 来 说 ， 并 不 推荐 做 法 ， 但 
是 大 量 的 HTTP/1 客户 端 和 服务 器 端 仍然 可 以 从 这 种 有 用 ( 尽管 有 点 老 套 ) 的 性 能 改进 中 
获 益 。 此 插件 让 你 能 够 维护 用 于 内 联 资源 的 可 编辑 性 和 模块 化 ， 并 为 你 处 理 该 过 程 中 那 
些 乏 味 的 部 分 。 

口 gulp-spritesmith 插件 可 以 从 不 同 的 图 像 文 件 生成 雪 胆 图 , 并 为 其 生成 CSS。 尽管 雪 薄 图 是 
一 个 HTTP/2 反 模 式 ( 因为 它 实 际 上 是 图 像 连接 )， 但 是 这 种 实践 为 HTTP/1 提供 了 性 能 
优势 。 

口 gulp-sass 从 SASS 文件 生成 CSS。 我 们 在 这 个 例子 中 使 用 的 是 LESS, 也 许 你 并 不 喜欢 它 ， 
而 是 更 喜欢 SASS。 这 完全 没 问题 。 这 个 插件 可 以 满足 你 的 愿望 。gulp-sass 使 用 的 语法 与 
gulp-less 类 似 ， 因 此 一 旦 你 熟悉 其 中 一 个 的 用 法 ， 自 然 就 会 熟悉 男 一 个 。 

口 gulp-uncss 是 第 3 章 中 使 用 的 uncss 工具 的 封装 。 它 将 从 项 目 中 删除 未 使 用 的 CSS， 只 不 
过 这 次 是 以 自动 化 的 方式 ! 

你 能 想到 的 任何 工具 都 可 能 有 一 个 插件 。 要 想 说 明 每 一 个 有 用 的 gulp 插件 ， 可 能 需要 一 本 

书 的 篇 幅 ， 显 然 我 们 做 不 到 。 
找 不 到 适合 任务 的 插件 怎么 办 ?如 果 你 知道 如 何在 Node 中 使 用 JavaScript 编写 任务 ， 那 么 
可 以 将 它 包装 成 gulp .task 并 运行 。gulp 不 限制 插件 的 使 用 。 如 果 你 想 帮 助 社区 并 为 你 认为 有 
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用 的 任务 编写 插件 , 那 就 去 做 吧 ! 可 以 在 gulp 文档 中 找到 gulp 搬 件 编写 指南 。 现 在 你 已 经 在 gulp 


生态 系统 中 看 到 一 些 其 他 有 用 的 插件 了 。 我 们 已 经 到 了 本 章 和 本 书 的 结尾 ,下 面 总 结 一 下 我 们 学 
到 的 东西 。 


12.5 小结 


于 


本 章 是 将 优化 知识 应 用 于 项 目的 学 习 过 程 的 里 程 碑 。 现 在 , 你 可 以 自动 执行 常见 的 优化 任务 

否则 需要 花费 大 量 时 间 来 手动 执行 。 以 下 是 你 在 本 章 学 到 的 概念 。 

口 gulp 是 一 个 流 式 构建 系统 。 流 从 磁盘 上 的 源 读 取 数 据 ， 并 进行 处 理 和 转换 ， 然 后 将 结 

写 回 磁盘 。 这 些 流 是 gulp 任务 的 基础 。 

口 文件 夹 结 构 有 助 于 组 织 项 目 ， 从 而 提高 工作 效率 。 适 当 使 用 gulp 的 文件 夹 结构 ， 可 以 确 
保 将 源 文件 与 部 署 到 生产 服务 器 的 文件 分 开 。 这 样 ， 你 就 可 以 在 实现 最 高 级 别 优化 的 同 
时 ,保持 可 编辑 性 。 

口 gulp 并 没有 明确 依赖 于 搬 件 来 完成 常见 任务 ， 但 是 它们 有 助 于 完成 这 些 任务 。 了 解 如 何 

为 项 目 安 装 插件 ， 你 就 可 以 访问 整个 工具 生态 系统 ， 从 而 提高 生产 力 。 

口 编写 gulp 任务 不 用 费 什么 力气 ,而且 代码 通常 很 短 。 你 可 以 用 它们 实现 各 种 各 样 的 目标 ， 
比如 构建 CSS、 缩 小 HTML 、 丑 化 JavaScript、 优 化 图 像 ， 以 及 任何 你 能 想到 的 事情 。 除 
了 这 些 基础 性 任务 之 外 ， 你 还 可 以 编写 监听 文件 更 改 的 任务 ， 以 便 在 文件 更 改 时 自动 重 
新 加 载 浏览 器 。 

口 可 以 编写 为 你 构建 项 目 文件 的 实用 程序 任务 。 这 些 构建 任务 可 以 帮助 你 创建 网 站 的 整洁 

版 构建 ， 并 可 用 于 生产 环境 。 

D gulp 的 插件 生态 系统 非常 广阔 ， 有 2500 多 个 插件 。 无 论 想 完成 什么 任务 ，gulp 的 插件 都 
很 有 可 能 会 对 你 有 所 帮助 ! 

通过 对 本 书 的 学 习 ， 你 了 解 了 许多 主题 。 你 学 会 了 很 多 提升 网 站 性 能 的 方法 ， 从 精简 CSS 


到 编写 更 简洁 的 JavaScript， 再 到 优化 图 像 和 字体 的 传输 等 。 


提高 网 站 性 能 不 仅仅 是 为 了 方便 , 对 用 户 体 验 也 至 关 重 要 。 通过 提升 网 站 性 能 , 你 可 以 使 网 


站 更 易于 访问 , 用 户 也 会 因此 留 下 来 看 看 你 要 提供 什么 。 无论 目 标 是 什么 一 一 获取 更 大 的 读者 群 
或 为 你 的 电子 商务 网 站 带 来 更 多 销售 额 一 一 更 快 的 网 站 都 能 帮助 你 实现 目标 。 


无 论 你 的 目标 是 什么 , 你 都 要 知道 , 这 本 书 只 是 你 追求 更 高 性 能 网 站 的 起 点 。 这 个 话题 非常 


广泛 ,任何 一 本 书 都 无 法 涵盖 其 全 部 内 容 , 但 是 其 中 某 些 方面 从 来 没有 真正 改变 过 。 你 要 尽 可 能 
减 小 网 站 资源 的 体积 ， 采 用 最 新 的 技术 ( 例如 HTTP/2 )， 并 依赖 能 够 带 来 高 性 能 感受 的 技术 。 


视 你 好 运 。 希望 你 的 网 站 总 是 精简 的 ,你 的 网 络 延迟 总 是 很 低 , 你 的 泻 染 快速 总 是 很 快 ， 你 


的 目标 总 近 在 眼前 。 


工具 参考 


本 书 中 使 用 了 许多 工具 ， 本 附录 对 它们 进行 了 归纳 ,以 方便 大 家 查阅 。 当 你 读 完 本 书后 , 若 
仍然 需要 使 用 工具 参考 ， 可 参考 本 附录 。 


说 明 本 附录 未 列 出 基于 浏览 器 的 开发 工具 。 你 可 以 在 大 多 数 浏览 器 中 调用 这 些 工 具 ， 方 法 是 
在 Windows 系统 上 按 F12 键 ， 在 Mac 系统 上 按 Cmd+AlttHI 键 。 所 有 工具 根据 在 书 中 出 现 
的 先后 顺序 列 出 。 


A.1 基于 Web 的 工具 


本 节 汇 总 了 本 书 中 使 用 的 所 有 基于 Web 的 工具 。 

口 TinyPNG 

Web 版 本 的 图 像 优化 工具 。 通 过 用 户 友 好 的 界面 压缩 PNG 和 JPEG。 

口 PageSpeed Insights 

分 析 URL， 并 给 出 提升 页 面 性 能 的 建议 。 

口 Google Analytics 

提供 关于 网 站 访问 者 的 数据 。 

口 Jank Invaders 
与 其 说 是 工具 ， 不 如 说 是 游戏 ， 可 以 帮助 你 了 解 jank 的 效果 。 非 常 适合 训练 眼睛 捕捉 迟 
组 的 动画 。 

口 Mobile-Friendly Test 

分 析 URL 并 给 出 报告 : 网 页 设计 是 否 适合 移动 端 。 

口 mydevice.io 

提供 设备 、 屏 幕 分 辨 率 和 像素 密度 的 综合 列表 。 

口 VisualFold! 

书签 工具 (我 开发 的 ! )， 将 辅助 线 放 在 页 面 上 的 指定 位 置 。 

口 Grumpicon 


从 SVG 雪 怕 图 生成 PNG (以 及 其 他 很 多 格式 )。 
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口 Can TUse 
提供 浏览 器 功能 及 其 支持 级 别 的 综合 列表 。 


A.2 基于 Node.js 的 工具 


本 节 汇 总 了 所 有 依赖 Nodejs 的 包 。 你 可 以 使 用 npm install <package-name> 语 法 安装 
这 些 工具 。 


A.2.1 _ Web 服务器 和 相关 中 间 件 


口 express 

一 个 小 型 的 Web 服务 器 框架 ， 在 本 书 中 用 于 在 本 地 主机 上 启动 服务 器 以 执行 示例 代码 。 
口 compression 

为 基于 Express 的 Web 服务 器 提供 gzip 压缩 。 


口 shrink-ray 


基于 compression 修改 、 支 持 Brotli 压缩 的 Express 中 间 件 。 


口 mime 
用 于 检测 本 地 文件 系统 上 文件 内 容 类 型 的 模块 。 
口 spdy 


启用 HTTP/2 的 Web 服务 器 模块 。 
A.2.2 图像 处 理 器 和 优化 器 


D svg-sprite 

在 命令 行 生成 SVG 雪 怕 图 。 
口 imagemin 
图 像 优 化 库 。 
D imagemin-jpeg-recompress 

imagemin 插件 ， 用 于 减 小 JPEG 文件 大 小 。 
D imagemin-optipng 
imagemin 插件 ， 用 于 减 小 PNG 文件 大 小 。 

D svgo 

用 于 减 小 SVG 大 小 的 命令 行 实用 程序 。 

D imagemin-webp 

imagemin 插件 ， 用 于 将 图 像 转换 成 WebP 格式 。 


D imagemin-svgo 


svgo 的 imagemin 封装 。 
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口 imagemin-pngquant 
另 一 个 imagemin 插件 ， 用 于 减 小 PNG 文件 大 小 。 
D imagemin-gifsicle 


imagemin 插件 ， 用 于 减 小 GIF 文件 大 小 。 


A.2.3 缩小 程序 


口 html-minify 

在 命令 行 缩小 HTML 文件 。 

口 minifier 

在 命令 行 缩小 CSS 和 JavaScript 文件 。 


口 uncss 


通过 分 析 网 站 ， 删 除 CSS 文件 中 未 使 用 的 规则 。 
A.2.4 字体 转换 工具 


口 tt2eot 

将 TrueType 字体 转换 为 Embedded OpenType。 
口 tt2woff 

将 TrueType 字体 转换 为 WOFF。 

口 tt2woff£2 

将 TrueType 字体 转换 为 WOFF2 。 


A.2.5 gulp 和 gulp 插 件 


口 gulp 

流 式 JavaScript 任务 运行 器 。 

D gulp-cli 

gulp 的 命令 行 界面 。 

口 gulp-util 

gulp 插件 的 实用 程序 。 

D gulp-changed 

用 于 检查 文件 更 改 的 gulp 插件 。 
D del 
删除 文件 和 目录 。 

口 gulp-livereload 


当 磁 盘 上 的 文件 更 改 时 ， 自 动 重新 加 载 浏 览 
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A.2. 


A.3 


D gulp-ext-replace 


更 改 文件 扩展 名 。 


D gulp-htmlmin 


缩小 HTML 文件 。 


D gulp-less 


用 于 编译 LESS 文件 的 gulp 插件 。 


D gulp-postcss 


封装 PostCSS 功能 的 gulp 插件 。 

D gulp-uglify 
丑化 JavaScriptt 文件 。 丑 化 不 仅 缩小 了 JavaScript， 而 且 减 少 了 变 
能 节省 空间 。 

口 gulp-concat 

将 多 个 文件 打包 为 一 个 文件 。 

口 gulp-imagemin 


封装 imagemin 的 gulp 插件 。 


6 PostCSS 和 PostCSS 插 件 


口 PostCSS 

用 于 转换 CSS 的 Node 程序 。 

口 Autoprefixer 

自动 为 CSS 属性 添加 浏览 器 厂商 前 绥 。 


口 cssnano 


口 autorem 


量 名 和 函数 名 ， 以 尽 可 


CSS 优化 顺 ， 不 仅 能 够 最 小 化 ， 还 通过 许多 目标 明确 的 优化 来 减少 CSS。 


一 个 PostCSS 插件 (我 开发 的 ! )， 用 于 将 CSS 中 的 px 单位 转换 成 rem 单位 。 


其 他 工具 


这 些 工 具 不 属于 任何 类 别 ， 但 也 值得 一 提 。 
D csscss 
基于 Ruby 的 命令 行 工 具 ， 用 于 识别 CSS 中 的 元 余 。 
口 loadCSS 
Filament Group 编写 的 库 ， 用 于 加 载 CSS， 同 时 不 会 阻塞 演 染 。 
口 Picturefill 
Filament Group 的 Scott Jehl 编写 的 <picture> 元 素 的 polyfill, 支持 


srcset 和 sizes 


| 
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口 Modernizr 

JavaScript 特性 检测 库 。 可 以 根据 需要 自 定义 ， 以 检测 尽 可 能 多 (或 尽 可 能 少 ) 的 功能 。 

口 fontTools 

基于 Python 的 字体 实用 程序 库 。 包 含 字体 子 集 设置 工具 pyft-subset。 

口 Font Face Observer 
Bram Stein 编写 的 库 ， 用 于 控制 字体 的 加 载 和 显示 ， 其 功能 类 似 于 基于 浏览 器 的 字体 加 
载 API。 

口 Alameda 

小 型 的 AMD 模块 /脚本 加 载 锅 ， 使 用 JavaScript promise。 

口 RequireJS 

Alameda 的 旧版 本 (虽然 兼容 性 更 好 )。 

DQ Zepto 

一 个 轻 量 级 兼容 jQuery 的 替代 方案 。 这 个 库 是 所 有 jQuery 替代 方案 中 功能 最 丰富 的 。 

口 Shoestring 

Filament Group 提供 的 兼容 jQuery 的 替代 品 ， 更 加 轻 量 。 

DD Sprint 

另 一 个 轻 量 级 的 兼容 jQuery 的 替代 方案 ， 速 度 非 常 快 。 

Ds.ajax 的 独立 实现 

jQuery $ .ajax 方法 的 独立 实现 。 

口 Fetch API 

Fetch API 的 polyfill。 

口 Velocity.js 

基于 requestAnimationFrame 驱动 实现 的 jQuery animate 方法 。 以 类 似 的 API 提供 

更 快 的 动画 。 


常用 jQuery 功能 的 


生 等 价 实现 


第 8 章 讨 论 了 在 网 站 JavaScript 中 采用 极 简 主 义 的 重要 性 ,其 中 一 种 方法 是 完全 删除 jQuery， 
并 使 用 浏览 器 中 可 用 的 函数 。 本 附录 重点 介绍 一 些 常见 的 jQuery 函数 ， 然 后 展示 如 何 使 用 原生 
方法 完成 相同 的 任务 。 由 于 篇 幅 有 限 ， 本 附录 并 不 是 一 个 完整 的 参考 手册 ， 只 是 提供 一 个 起 点 。 


B.1 选择 元 素 
jQuery 的 $s 核心 方法 使 用 CSS 选择 需 字 符 串 选择 DOM 元 素 ， 如 下 所 示 。 


$ ("div"); 


这 个 操作 将 选择 页 面 上 的 所 有 <div> 元 素 。 一 般 来 说 ， 在 $ 方 法 中 工作 的 任何 有 效 CSS 选择 
和 都 能 章 谷 document .querySelector 和 docum nt.querySelectorAll (jQuery 特有 的 
自 定义 选择 器 除外 )。 它 们 的 区 别 在 于 : document .querySelector 只 返回 第 一 个 匹配 的 元 素 ， 
而 document .querySelectorAll 则 返回 数组 对 象 中 所 有 匹配 的 元 素 ( 即使 只 返回 一 个 元 素 )。 
以 下 代码 示例 中 注释 了 返回 值 。 


代码 清单 B-1 使 用 querySelector 和 querySelectorAll 


个 
ed 与 前 面相 同 的 
2 document .querySelector("p:nth-of-typel Sn 但 


的 和 
的 <p> 元 素 document .querySelectorAll("p:nth-of-typel 返回 数组 
document .querySelector("p"); 
document .querySelectorAll("p"); 通过 数组 返回 所 有 
匹配 的 <p> 元 素 


虽然 这 两 种 方法 很 有 用 , 但 是 还 有 其 他 方法 得 到 了 更 广泛 的 支持 , 并 且 在 选择 元 素 时 速度 更 
快 ， 如 表 B-1 所 示 。 
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表 B-1 jQuery 与 原生 元 素 选择 方法 


选择 器 jQuery 代码 原生 等 价 实现 
ID $ ("#element"); document .getElementById("element"); 
标签 STiy™ ys document .getElementsByTagName ("div"); 
类 各 $(".element"); document .getElementsByClassName ("element"); 


几乎 所 有 浏览 器 都 支持 这 些 核心 元 素 选择 方法 ， 当 元 素 在 DOM 中 的 存在 已 知 且 可 预测 时 ， 
这 些 方法 非常 适合 用 于 选择 元 素 。 要 进行 更 复杂 的 选择 ， 应 该 使 用 前 面 提 到 的 querySelector 
方法 。 


B.2 检查 DOM 是 否 就 绪 


第 8 章 中 介绍 过 这 一 点 ， 我 将 在 此 复述 ， 以 供 参考 。 在 jQuery 中 执行 任何 操作 之 前 ， 必 须 
检查 DOM 是 否 就 绪 ， 否 则 jQuery 代码 将 无 法 正确 执行 。 在 jQuery 中 , 检查 DOM 是 否 就 绪 的 党 
用 方法 如 下 所 示 。 


$s (document) .ready (function(){ 
// 具体 代码 
让 
如 果 想 要 节省 几 字 节 ， 也 可 以 使 用 等 效 的 简写 方法 。 


$s (function()t{ 
// 具体 代码 
) 

如 果 你 喜欢 使 用 普通 的 旧 JavaScript， 而 不 是 jQuery， 那 么 可 以 通过 addEventListener 
监听 DOoMContentLoaded 事件 ， 以 检查 DOM 是 否 就 绪 ， 如 下 所 示 。 


document .adqdqEventListener("DOMContentLoaded"，function(){ 
// 具体 代码 
3) 发 


这 种 方式 从 IE9 开始 支持 。 不 过 ， 在 较 旧 的 浏览 器 中 ， 你 需要 使 用 不 同 的 方法 。 


document .onreadystatechange = function(){ 
if(document .readyState === "interactive")t{ 


// 具体 代码 


} 
> 
如 果 不 使 用 jQuery， 并且 不 知道 要 使 用 哪个 DOM 就 绪 方 法 ,请 使 用 document .onready- 
statechange。 它 具有 广泛 的 支持 ,其 工作 方式 与 使 用 addEventListener 监听 DoMContent- 
Loaded 事件 的 方式 大 致 相同 。 
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B.3 绑 定 事件 


除了 元 素 选 择 之 外 ,jQuery 最 大 的 优点 是 它 的 事件 绑 定语 法 。 本 节 展 示 了 常见 的 jQuery 
件 绑 定 方法 ， 以 及 如 何在 不 使 用 jQuery 的 情况 下 实现 类 似 的 功能 。 


邮 


烛 


本 节 不 是 事件 参考 手册 ! 
本 节 不 会 详细 介绍 jQuery 或 原生 JavaScript API 中 可 以 使 用 的 所 有 事件 。 要 了 解 可 插入 
addEventListener 的 可 用 事件 ， 请 查看 MDN 中 的 事件 参考 。 


B.3.1 简单 事件 绑 定 


jQuery 使 用 Pina 方法 监听 元 素 上 的 事件 ( 自 jQuery v3 以 来 ，binG 方法 被 弃 用 ， 取 而 代 之 
的 是 on， 详情 参见 后 文 )。 下 面 是 单 击 元 素 时 执行 某 些 代码 的 简单 示例 。 
Ss(".aLlick-mer) .bind("elick"; function()t 


// 放置 点 击 事件 代码 
3 


jQuery 还 有 一 些 简写 方法 比 使 用 pind 更 简洁 。 以 下 代码 能 够 完成 相同 的 任务 。 


$s(".click-me") .click(function(){ 
// 放置 点 击 事件 代码 
所 过 


使 用 querySelector 和 addEventListener 可 以 实现 相同 功能 ， 如 下 所 示 。 
document .querySelector(".click-me") .addEventListener ("click", function(){ 

// 放置 点 击 事件 代码 
] 
大 多 数 情况 下 , 你 应 该 能 够 将 jQuery pina 语法 中 的 事件 名 放 入 addEventListener 使 用 ， 
但 除了 最 基本 的 事件 之 外 ， 不 要 假设 一 定 可 以 这 么 处 理 。 请 查看 Mozilla Developer Network 的 
Web 事件 参考 ， 以 获取 可 使 用 的 事件 列表 。 


B.3.2 ”以 编程 方式 触发 事件 

在 JavaScript 代码 中 ， 有 时 你 会 以 编程 方式 触发 绑 定 在 元 素 上 的 事件 代码 。 假 设 你 仍然 具有 
绑 定 到 .click-me 元 素 的 相同 click 事件 代码 ， 并 且 希 望 根据 需要 运行 绑 定 在 该 元 素 上 的 
click 事件 代码 。 为 此 ， 可 以 使 用 jQuery 的 trigger 方法 。 

$s(".click-me") .trigger ("click"); 

这 个 语句 将 运行 绑 定 在 .click-me 元 素 上 的 click 事件 代码 。 如 果 你 需要 按 需 运行 绑 定 在 
元 素 上 的 事件 代码 ， 这 是 办 法 之 一 。 另 外 , 通过 aispatchEvent 方法 , 你 可 以 在 不 使 用 jQuery 
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的 情况 下 完成 相同 的 任务 。 
代码 清单 B-2 ”脱离 jQuery， 以 编程 方式 触发 事件 


创建 新 的 click 
var clickEvent = new Event ("click"); 事件 对 象 触发 事件 
document .querySelector(".click-me") .dispatchEvent (clickEvent) 
这 种 语法 不 像 jQuery 那么 紧凑 ,但 它 确实 是 有 效 的 。 你 可 以 通过 创建 一 个 辅助 隐 数 来 避免 
新 建 Event 对 象 。 


代码 清单 B-3 ”触发 事件 的 辅助 函数 
function trigger(selector, eventType) { 
document .querySelector(selector) .dispatchEvent (new Event (eventType)); 


} 


trigger(".click-me", "click"); 


代码 中 的 trigger 函数 使 用 给 定 的 选择 器 选择 元 素 ， 并 触发 指定 的 事件 。 虽 然 并 不 经 常 需 
要 在 事件 绑 定 元 素 的 上 下 文 之 外 触发 事件 ， 但 是 确实 可 以 在 不 使 用 jQuery 的 情况 下 实现 此 功能 。 


B.3.3 ” 尚 不 存在 的 目标 元 素 


jQuery 可 以 通过 使 用 on 方法 绑 定 不 存在 的 元 素 。 当 你 需要 给 现在 不 存在 但 将 来 可 能 存在 的 
元 素 赋予 功能 时 ， 这 个 方法 就 能 派 上 用 场 。 下 面 是 此 方法 在 <ul> 中 的 <11> 元 素 上 执行 代码 的 
示例 。 

$(".list").on("mouseover", ".list-item", function(){ 

// 放置 mouseover 事件 代码 

}); 
借助 这 段 代码 ， 将 来 添加 到 .1ist 元 素 的 任何 .1ist-item 元 素 ， 仍 将 执行 绑 定 在 
mouseover 事件 上 的 代码 。 你 可 以 想象 适用 这 种 方法 的 各 种 场景 。 可 以 通过 寸 以 下 代码 ， 在 不 使 
用 jQuery 的 情况 下 执行 相同 的 操作 。 


代码 清单 B-4 不 使 用 jQuery， 对 不 存在 的 元 素 绑 定 行为 


document .querySelector(".list") .addEventListener("mouseover", function(event)t 
if(levent.target.className === "list-item")f 事件 绑 定 在 目标 
// 放置 mouseover 事件 代码 检查 目标 元 素 是 否 元 素 的 父 节点 上 
} 存在 期 望 的 类 名 


ss 

上 述 代 码 同 样 不 像 jQuery 那样 紧凑 ,但 功能 是 一 致 的 。 当 然 ， 如 果 你 要 使 用 类 名 以 外 的 其 
他 对 象 来 定位 子 元 素 ， 则 可 能 需要 在 event .target 对 象 中 寻找 其 他 方法 。 例 如 ， 可 以 使 用 
event .target .id 属性 ,根据 ID 定位 元 素 ; 或 使 用 event .target .tagName 属性 ， 按 标签 
名 定位 元 素 。 虽 然 它 不 像 jQuery 的 语法 那么 方便 或 紧凑 ， 但 确实 有 效 。 
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B.3.4” 移 除 事 件 绑 定 
jQuery 可 以 使 用 unpinda 和 off 方法 从 元 素 中 移 除 绑 定 ， 如 下 所 示 。 


$s(".click-me") .unbind ("click"); 
SsS(" 11iSt") .off ("mouseover";, .list-1item"); 


unbind 与 ping 一 样 ， 从 jQuery 的 第 3 版 开始 就 被 弃 用 了 ， 所 以 以 后 最 好 使 用 off。 无 论 
哪 种 情况 ， 都 可 以 在 JavaScript 中 使 用 removeEventListener 移 除 元 素 上 的 事件 绑 定 。 


$(".click-me") .removeEventListener("click", boundFunctionReference); 


使 用 removeEventListener 移 除 事件 绑 定 时 ， 必 须 首 先 提供 绑 定 到 它 的 函数 。 本 示例 中 ， 
boundFunctionReference 就 是 使 用 addEventListener 绑 定 到 元 素 上 的 函数 的 占 位 符 。 


B.4 在 一 组 元 素 上 迭代 


jQuery 提供 了 一 个 特别 实用 的 方法 ,来 以 each 方法 的 形式 迭代 一 组 匹配 的 元 素 。 你 可 以 在 
任何 匹配 元 素 集 上 运行 它 。 


$s("ul > 1i").each(function(){ 
$ (this); // 迭代 中 的 当前 元 素 
jo 


在 没有 jQuery 的 情况 下 ， 实 现 相同 功能 也 很 容易 。 只 需 使 用 for 循环 即 可 ， 如 下 所 示 。 


代码 清单 B-5 不 使 用 jQuery， 在 一 组 元 素 上 迭代 


Var listElements = document .querySelectorAll("ul > 1i" 
fantvar i = 0; i < listElements.length; i++){ / 选择 所 有 
listElements[i]; I 迭代 1istElements | 直接 子 级 


| 当前 元 素 中 的 所 有 元 素 


男 一 种 迭代 一 组 匹配 元 素 的 方式 也 使 用 for 结构 ， 但 操作 不 同 。 


for(var i in listElements)f{ 
listElements[i]; // 迭代 中 的 当前 元 素 
} 


但 是 ,请 注意 这 种 语法 : 它 不 仅 会 循环 集合 中 的 所 有 元 素 ， 还 会 循环 对 象 成 员 ， 如 length 
属性 。 我 们 通常 不 想 使 用 这 种 语法 ,但 你 可 以 想象 出 需要 这 种 语法 的 场景 。 


B.5 在 元 素 上 操作 类 


JQuery 人 允许 使 用 aadqclass、removeclass 和 toggleclass 方法 操作 元 素 上 的 类 。 
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代码 清单 B-6 ”使 用 jQuery 操作 元 素 类 
$(".item") .addClass ("new-class"); 添加 new-class 类 


$s(".item") .removeClass ("new-class"); 一 移 除 new-class 类 
$s(".item") .toggleClass ("new-class"); 


切换 new-class 类 
一 个 名 为 classList 的 原生 类 操作 API 提供 了 很 多 这 种 功能 。 下 面 是 classList 驱动 的 
方法 ， 等 价 于 前 面 所 示 的 jQuery 方法 。 
代码 清单 B-7 不 使 用 jQuery， 操 作 元 素 类 
var item = document .querySelector(" .item" ) ， 添加 new-class 类 


item.classList.add("new-class"); 
item.classList.remove("new-class"); | 一 移 除 new-class 类 


item.classList.toggle("new-class"); | 切换 new-class 类 
还 可 以 将 条 件 作 为 toggle 方法 的 第 二 个 参数 。 如 果 条 件 的 计算 结果 为 true， 则 添加 类 ; 
如 果 结 果 为 false， 则 移 除 类 。 


代码 清单 B-8 使 用 classList， 有 条 件 地 切换 类 


Var enabled = true; 


(*" 
Cr 


item.classList.toggle("enabled", enabled); | 一 一 添加 enabled 类 
enabled = false; 
item.classList.toggle("enabled", enabled); 一 一 移 除 enabled 类 


然而 ，classList 并 没有 得 到 普遍 的 支持 ， 而 且 自 下 10 以 来 ， 所 有 下 版 本 都 只 能 部 分 支 
持 它 。 例如， 前 面 代码 中 显示 的 toggle 方法 的 第 二 个 参数 ,在 任何 版 本 的 卫 中 都 得 不 到 支持 。 
此 时 ， 你 始终 可 以 操作 选 定 元 素 的 className 属性 。 只 需 将 字符 串 连 接 到 该 属性 ， 就 可 以 轻松 
地 将 类 添加 到 元 素 中 。 


item.className += " new-class"; 


移 除 /切换 类 更 为 复杂 ， 通 常 涉及 使 用 正则 表达 式 ， 或 者 将 className 属性 扩展 到 数组 中 ， 
并 以 数组 方式 对 其 进行 操作 。 如 果 需 要 在 没有 类 代码 的 情况 下 进行 比 添加 类 更 复杂 的 操作 , 请 考 


虑 使 用 polyfill。 
有 时 ， 你 可 能 需要 检查 元 素 是 否 具 有 特定 的 类 ， 此 时 可 以 借助 jQuery 的 hasclass 方法 。 
$(".item") .hasClass ("item"); // 返回 true 


而 最 简单 的 方法 是 使 用 classList 的 contains 方法 。 
代码 清单 B-9 使 用 classList.contains, 检查 类 是 否 存在 


document .querySelector(".item") .classList.contains ("item"); Bs 返回 true 
对 于 不 支持 classList 的 浏览 器 , 请 使 用 前 面 提 到 的 polyfill， 和 否则 就 需要 自己 编写 代码 来 
检查 类 是 否 存 在 。 
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B.6 访问 和 修改 样式 
jQuery 允许 通过 css 方法 访问 和 修改 元 素 样式 .可 以 在 jQuery 中 获取 或 设置 单个 CSS 属性 。 
代码 清单 B-10 ”使 用 jQuery 设置 样式 


获取 item 的 当前 字 小 
$s(".item").css ("font-size"); <。_ | 获取 的 当前 字体 大 
S$(".item") .css("font-size"，"1.5rem" ) ; < 一 将 item 的 字体 大 小 设置 为 1.5 rem 


还 可 以 使 用 css 方法 在 元 素 上 设置 多 个 CSS 属性 。 


$s(".item").css({ 
color: "#f00", 
border: "lpx solid #0f0", 
fontSsize: "24BX" 

过 


说 明 在 元 素 上 设置 CSS 属性 时 ， 请 记 住 ， 在 对 象 上 下 文中 使 用 带 连 字符 的 属性 时 ， 其 表示 方 
式 需 要 发 生变 化 。font-size 变 为 fontSize，border-bottom 变 为 borderBottom， 
以 此 类 推 。 连 字符 在 变量 名 中 不 是 合法 字符 ， 因 为 它 是 语言 运算 符 。 这 个 约定 也 存在 于 
原生 JavaScript 中 ， 而 不 仅仅 是 jQuery， 请 务必 说 记 。 


在 不 使 用 jQuery 的 情况 下 ， 获 取 / 设 置 样式 更 为 复杂 。 如 果 要 检索 元 素 上 的 CSS 属性 集 ， 则 
需要 使 用 getcomputedqstyle 方法 。 


代码 清单 B-11 不 使 用 jQuery， 获取 元 素 样 式 


Var item = document .querySelector(".item"); 

getComputedStyle (item) .fontSize; < 一 返回 元 素 的 字体 大 小 

设置 样式 需要 使 用 style 对 象 。 

item.style.fontSize = "24px"; 

如 果 要 设置 多 个 样式 怎么 办 ? 可 以 通过 HTML style 属性 一 次 性 设置 。 
item.setAttribute("style", "font-size: 24px; border-bottom: lpx solid #0f0;"); 


对 某 些 人 来 说 ， 这 种 代码 可 能 有 点 不 美观 , 但 它 的 性 能 很 好 。 如 果 你 不 介意 ,并 且 仍 然 希望 
看 到 更 美观 的 内 容 ， 那 么 可 以 创建 一 个 类 似 于 以 下 代码 所 示 的 辅助 函数 ， 该 函数 的 语法 类 似 于 
jQuery 的 css 方法 ， 可 以 设置 多 个 CSS 规则 。 


代码 清单 B-12 不 使 用 jQuery， 通 过 辅助 函数 设置 多 个 CSS 属性 


function setCSS(element, props){ 和 迭代 props 对 象 
for (Var CSSProperty in Drops){ 中 的 CSS 属性 


302 附录 B 常用 jQuery 功能 的 原生 等 价 实现 


element.style[CSSProperty] = props[CSSPropertyl]; 

使 用 对 象 的 

} 元 素 被 传递 给 键 设置 关联 
辅助 函数 的 属性 

setCSS (document .querySelector(".item"), { 

fontSize: "24px", CSS 属性 及 其 关联 

border: "lpx solid #0f0", 值 的 对 象 将 传递 给 

borderRadius: "8px" 辅助 函数 


上 光 


可 以 读 取 由 style 对 象 设置 的 属性 ,但 只 有 在 以 前 设置 过 这 些 属性 时 ， 才 会 填充 它们 ， 否 
则 会 得 到 一 个 空 字符 串 。 此 时 可 以 使 用 getcomputedstyle， 如 前 所 示 。 


B.7 ”获取 和 设置 属性 
利用 jQuery 的 attr 属性 可 以 获取 和 设置 属性 ， 如 下 所 示 。 
代码 清单 B-13 ”使 用 jQuery 设置 属性 


$s(".item") .attr("style"); 

$s(".item") .attr("style", "color: #0f0;"); < 一 设置 style 属性 
获取 style 属 性 
的 当前 值 


使 用 古老 的 JavaScript 设置 它们 就 更 简单 了 。 
代码 清单 B-14 不 使 用 jQuery, 设置 属性 


获取 style 属性 


Var item = document .querySelector(".item"); 


item.getAttribute("style"); 的 当前 值 
item.setAttribute("style", "color: #0f0;"); < 一 设置 style 属性 


如 果 要 一 次 性 设置 多 个 属性 ， 可 以 使 用 与 代码 清单 B-8 类 似 的 代码 。 
function setAttrs(element, attrs)t 
for (var attr in attrs)t 
element .setAttribute(attr, attrs[lattr]); 


} 
} 


setAttrs (document .querySelector(".item"), { 
Style: "oolLors #3337"; 


id: "uniqueItem" 


党 


setAttribute 和 getAttribute 方法 几乎 能 够 提供 全 方位 支持 ， 可 以 放心 使 用 ， 不 必 太 
过 关注 兼容 性 。 


B.8 获取 和 设置 元 素 内 容 
jQuery 有 两 种 获取 和 设置 元 素 内 容 的 方法 : html 和 text。 两 者 的 区 别 在 于 : html 检索 元 
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素 内 容 时 包含 标记 ， 用 于 设置 元 素 内 容 时 ， 将 直接 处 理 标记 ; text 检索 元 素 内 容 时 去 掉 标 记 ， 
用 于 设置 元 素 内 容 时 ， 将 按 字面 意思 处 理 文本 ， 并 将 任何 与 标记 相关 的 字符 编码 为 HTML 实体 。 
jQuery 使 用 这 些 方法 获取 和 设置 元 素 内 容 的 过 程 如 下 所 示 。 


代码 清单 B-15 使 用 jQuery 获取 和 设置 元 素 内 容 


获取 元 素 内 容 ， S(" .Itemy" html (); 
包含 HTML S(Ttem™y .hntml(™" PHel lo b> ); < 一 设置 HTML 内 容 
$s(".item").text() 2 
i : 获取 元 素 内 容 ， 
| 2 ee .text (" sulle /SS 去 除 HTML 标记 
设置 元 素 内 容 ， 进 行 
HTML 编码 处 理 
这 些 方法 在 原生 JavaScript 中 有 类 似 的 等 价 物 : innerHTML 和 innerText， 它们 的 使 用 方 
式 如 下 所 示 。 
代码 清单 B-16 不 使 用 jQuery， 获 取 和 设置 元 素 内 容 
Var item = document .querySelector(".item"); 
RE ltem.innerHTML 
获取 元 素 内 容 ， item.innerHTML = "<p>Hello!</p>"; < 一 设置 HTML 内容 
包括 HTML item.innerText; a 
item.innerText = "<p>Hello!</p>"; 获取 元 素 内 容 ， 去 
| 并 进行 除 HTML 标记 
HTML 编码 处 理 


注意 : innerHTML 被 视 为 标准 属性 , 但 innerText 不 是 (尽管 很 多 浏览 器 都 支持 它 
innerText 关注 样式 , 如 果 CSS 隐藏 了 其 中 的 另 一 个 元 素 ，innerText 
含 这 个 隐藏 元 素 的 内 容 。 如 果 这 会 对 你 造成 影响 ， 可 以 改 用 textcontent 属性 。 


代码 清单 B-17 设置 元 素 的 文本 内 容 
item.textContent; ”< 一 获取 所 有 元 素 文 本 ， 甚 至 包含 隐藏 元 素 的 文本 
innerHTML 是 获取 或 设置 元 素 内 容 的 “黄金 标准 ”( 如 果 你 希望 包含 HTML )， 但 如 果 你 对 


使 用 哪个 属性 来 获取 或 设置 元 素 文本 有 疑问 ， 我 建议 默认 使 用 textcontent， 它 得 到 了 很 好 的 
支持 ( 除了 正 8 和 更 低 版 本 )。IE6 及 更 高 版 本 支持 innerText。 


B.9 替换 元 素 


jQuery 有 一 个 replaceWwith 方法 。 该 方法 与 html 不 同 ， 它 允许 将 整个 元 素 本 身 替 换 为 所 
需 的 任何 内 容 ， 而 不 仅仅 是 其 内 部 内 容 。 


$s(".list").replaceWith("<p>I don't like lists.</p>"); 


使 用 此 代码 ，. 1ist 元 素 将 替换 为 新 的 <zp> 元 素 。 实 际 上 ， 浏 览 器 支持 outerHTML 元 素 已 
经 有 一 段 时 间 了 ， 它 也 能 完成 同样 的 任务 。 


document .querySelector(".list") .outerHTML = "<p>I don't like lists.</p>"; 


dol 
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真 的 太 简 单 了 。 从 正 4 ( 是 的 ，Internet Explorer 4 ) 开始 就 支持 outerHTML 了 。 其 他 浏览 器 
要 么 从 一 开始 就 支持 它 ， 要 么 很 久 以 前 就 支持 它 ， 所 以 可 以 放心 大 胆 地 使 用 。outerText 属性 
的 工作 方式 与 innerText 类 似 ， 但 它 将 元 素 蔡 换 为 你 提供 的 任何 文本 。 


document .querySelector(".list") .outerText = "<p>I don't like lists.</p>"; 

这 将 使 用 提供 的 文本 完全 替换 元 素 ， 并 将 对 HTML 字符 进行 编码 ， 以 便 它们 直接 显示 ， 而 
不 需要 浏览 器 进 行 解析 。 然而 与 outerHTML 不 同 的 是 ,outerText 不 是 标准 属性 。 除 了 Firefox 
之 外 的 每 个 浏览 器 都 支持 它 ， 所 以 要 小 心 使 用 。 


B.10 ”隐藏 和 显示 元 素 


这 个 操作 非常 简单 。jQuery 有 两 种 隐藏 和 显示 元 素 的 方法 ， 分 别 命名 为 nide 和 show， 它 
们 的 工作 方式 如 下 。 


S$(".item") .hide(); 
Ss(".item").show!(); 


通过 使 用 元 素 的 style 对 象 ， 可 以 实现 相同 的 功能 。 
代码 清单 B-18 使 用 style 对 象 隐藏 和 显示 元 素 


急 藏 元 素 
document .querySelector(".item") .style.display = "none"; | 隐藏 元 素 
document .querySelector(".item") .style.display = "block"; < 一 显示 元 素 


当然 ， 你 应 该 记 住 , 将 aisplay 设置 成 block 未 必 是 最 合适 的 。 也 许 你 正 要 切换 的 是 使 用 
flex、inline-flex、inline 或 inline-block 显示 类 型 的 元 素 (而 不 是 block )。 在 这 种 
情况 下 ， 最 好 有 一 个 全 局 实用 类 来 隐藏 元 素 ， 如 下 所 示 。 


.hidef 
display: none; 


} 


然后 你 就 可 以 使 用 classList 方法 来 添加 或 删除 这 个 类 。 将 hiae 类 添加 到 元 素 时 ， 它 将 
隐藏 该 元 素 。 当 hide 类 被 移 除 时 ， 元 素 的 原始 display 属性 值 将 恢复 。 这 样 可 以 防止 意外 的 
布局 问题 。 


B.11 删除 元 素 
有 时 需要 元 素 消 失 。jQuery 提供 了 一 个 很 好 的 方法 remove， 其 工作 方式 如 下 。 


$(".item") .remove(); 


这 个 操作 将 从 DOM 中 删除 具有 item 类 的 每 个 元 素 。 原 生 JavaScript 中 的 方法 使 用 了 相同 
的 名 称 ， 工 作 方式 也 类 似 。 请 试 试 以 下 代码 。 
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document .querySelector(".item") .remove(); 


这 里 的 问题 是 ，querySelector 只 返回 与 查询 匹配 的 第 一 个 项 。 你 可 以 使 用 aueryselec- 
torAl1， 但 它 的 返回 值 是 一 个 对 象 数 组 。 因 此 ， 如 果 要 删除 与 查询 匹配 的 所 有 项 ， 则 需要 遍历 
匹配 的 元 素 集 ， 如 下 面 的 代码 清单 所 示 。 


代码 清单 B-19 | jQuery， 从 DOM Se 


var items = document. i .item" ， 
for(var i = 0; i < items.length; I++) 使 用 for 循 Ms 
items[i] .remove () ; 迭代 中 的 当前 环 和 代 元 素 | 元 系 
} 被 选中 
tA 


这 段 代 码 可 以 用 于 任何 返回 对 象 数 组 的 元 素 选 择 方法 (例如 getElementsByTagName 和 
getElementsByClassName ), 而 不 仅仅 是 querySelectorA1l1。 如 果 只 需要 使 用 getElementById 


事情 会 简单 得 多 ， 因 为 可 以 直接 对 所 选 元 素 调 用 remove 方法 ， 而 不 必 在 


或 querySelector, 


一 组 元 素 上 迭代 o 


B.12 更 进一步 


通过 原生 JavaScript 方 法 代替 jQuery, 可 以 实现 更 多 功能 ,我 推荐 一 个 很 好 的 网 站 : You Might 
Not Need jQuery。 该 网 站 上 有 很 多 常见 ( 和 不 常见 ) jQuery 行为 的 代码 片段 , 及 其 原生 等 价 方法 。 
它 还 允许 你 指定 所 需 的 浏览 器 兼容 性 级 别 。 如 果 本 附录 未 提 及 你 想 知 道 的 内 容 , 可 以 看 看 这 个 网 
站 。 如 果 依 然 无 法 解决 ， 就 使 用 Google 搜索 吧 ! 总 有 人 会 发 现 解决 方案 的 ! 
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